STRIX | ストリックスマーケティング HP制作会社

STRIX | ストリックスマーケティング HP制作会社

css関連

疑似要素,beforeとafterの使い方

疑似要素とは

疑似要素には次のようなものがあります。

この疑似要素を使うと、HTMLには書かれていない要素もどきをCSSで作ることができます。「HTMLには表記したくないけど、デザイン的にちょっと工夫したい」というときに重宝してます。
ちなみに疑似要素の書き方は、css2では:(コロンを1回),css3では::(コロンを2回)と書き方が変わっています。疑似クラスの:hoverや:selectedは変わらず:(コロン1回)なので注意。

上記の結果

  • 疑似要素【::before】の練習
  • 疑似要素【::after】の練習
  • 疑似要素【::first-letter】の練習
  • 疑似要素【::first-line】の練習
    疑似要素【::first-line】の練習