【CSS】テキストやリンクを目立たせるいくつかの方法

新しい記事を投稿した時や新商品を発売した時にその説明ページに対するリンクを目立たせたいという場合がある．
そのような場合にアイコン画像を作って張るのもよいが，CSS だけで作ったほうがスッキリする．
お客様に質問いただき，ちょうどよい機会なので記事にした．

新着情報 new を CSS のみで作成した例

下の二つについては最初だけ点滅するので，この状態でページの更新をしてもらえればどういう動作か分かるだろう．
目立たせる方法はいろいろ考えられるが，後ろに new という文字を表示することを基本に作ってみた．

新着情報
新着情報
新着情報
新着情報
新着情報

CSS で目立たせるサンプルコード

サンプルは A タグで作っているが，SPAN タグでも問題なく動く．

CSS の基本的な部分(共通で呼び出す)

.new::after {
  content: "new";　/* 文字 */
  font-size: 70%; /* 大きさ */
  font-weight: bold; /* 太字 */
  display: inline-block;
  position: relative; /* 位置 */
  top: -12px;
}

後ろに赤で上付き文字

新着情報

HTML

<a href="" class="new red">新着情報</a>

CSS

.red::after {
  color: red;
}

後ろに青の上付き文字で四角で囲う

新着情報

HTML

<a href="" class="new blue">新着情報</a>

CSS

.blue::after {
  margin: 2px;
  padding: 2px;
  color: blue;
  border: 1px solid blue;
  line-height: 1;
}

後ろにオレンジの枠で囲って上付きの白抜き文字

新着情報

HTML

<a href="" class="new orange">新着情報</a>

CSS

.orange::after {
  margin: 2px;
  padding: 2px;
  color: white; /* 白抜き文字 */
  background-color: orange; /* オレンジの背景 */
  border-radius: 30%; /* 角を少し丸く */
  border: 1px solid orange;
  line-height: 1;
}

後ろに赤で上付き文字で最初だけ点滅して残る

ページを更新しないと見えないと思うが，10 回点滅して，その後は残るパターン

新着情報

半分まで行ったところで見えなくして，また見える状態に戻ってくるという動作を 0.3s で 10 回行う．linear は一定の速度で行う，ということを意味している．

HTML

<a href="" class="new red blink">新着情報</a>

CSS

.blink::after {
  opacity: 1; /* 見える状態 */
  animation: flash 0.3s 10 linear;
}
@keyframes flash {
  50% { /* 動作の中心 */
    opacity: 0; /* 見えない状態 */
  }
}

後ろに赤で上付き文字で最初だけ点滅して消える

ページを更新しないと見えないと思うが，5 回点滅して，その後は消えるパターン

新着情報

最初見えない状態にしておいて，半分まで行ったところで見えるようにして，また見えない状態に戻ってくるという動作を 0.3s で 5 回行う．linear は一定の速度で行う，ということを意味している．

HTML

<a href="" class="new red blink2">新着情報</a>

CSS

.blink2::after {
  opacity: 0; /* 見えない状態 */
  animation: flash2 0.3s 5 linear;
}
@keyframes flash2 {
  50% { /* 動作の中心 */
    opacity: 1; /* 見える状態 */
  }
}