どうも7noteです。疑似要素を使って、文章の最初や最後に一括で文字を入れる方法。

ニュース記事の一覧や、たとえば物件一覧など、見出しの最後に「New」とか「おすすめ！」みたいな文字を入れるデザインの例。
1つ1つに<span>New</span>みたいにやっていってもいいのですが、修正があったり、自動更新されるページだと毎回手動で処理をするのは大変です。

そんな固定の文字や記号を入れる時は疑似要素が便利。

たとえばこのように、ニュース記事の文章の最後に小さく文字や記号を入れることができます。

完成例

最初に入れる方法と、最後に入れる方法の2種類を同時に書いていきます。

ソース

index.html

<ul>
  <li class="new">YouTubeで一時障害 復旧</li>
  <li class="new">PS5発売 抽選倍率100倍超も</li>
  <li class="new">Googleフォト 無料保管制限へ</li>
  <li>独身の日 アリババで7.9兆円</li>
  <li>身代金要求 サイバー攻撃多発</li>
</ul>

style.css

ul,li {
  font-size: 18px;           /* 文字の大きさを指定 */
  list-style: none;          /* デフォルトのリストの「・」を無効化 */
}

ul li::before {
  content: '▼';             /* 最初に入れたい任意の文字を入力 */
}

ul li.new::after {
  content: 'New!';           /* 最後に入れたい任意の文字を入力 */
  font-size: 11px;           /* 文字サイズを11pxに指定 */
  font-weight: bold;         /* 太文字に指定 */
  line-height: 1.3;          /* 行間を指定 */
  display: inline-block;     /* line-heightの背景にも色を入れるため */
  color: #fff;               /* 文字色を白に指定 */
  background: #F00;          /* 背景色を赤に指定 */
  border-radius: 15px;       /* 楕円形にするため角丸 */
  padding: 0 5px;            /* 上下左右に少し余白 */
  margin-left: 10px;         /* これを指定すれば上寄せや下寄せが可能 */
  vertical-align: baseline;  /* これを指定すれば上寄せや下寄せが可能 */
}