CSSの疑似要素を使った小技を紹介

CSSの疑似要素を使った小技を紹介

久々の更新です。基本jQueryのサンプルを紹介しているのですが今回は汎用性のありそうなCSSの疑似要素を使ったサンプルを紹介したいと思います。
「::selection」と「:first-letter」の2つの疑似要素を使います。


CSSの疑似要素を使った小技を紹介
解説

「::selection」はテキストの選択(ドラッグ)時のスタイルを指定します。
テキストをマウスでドラッグすると文字色が反転するあれです。

::selection {
  background: red;
  color: #fff;
}

「:first-letter」は文章の最初の一文字目にだけスタイルを適用することが出来ます。
この「:first-letter」を利用すれば雑誌のような文字組も簡単に実装できます。

p:first-letter {
  float: left;
  font-size: 300%;
  line-height: 1em;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です