CSS #06 疑似要素

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「疑似要素」についての内容です。

こちらのhtmlにスタイルをあてていきます。

 

疑似要素

疑似要素とは、

ある要素の一部を指定するときに使うセレクタになります。

 

first-line

first-lineは、ある要素の一行目のみというセレクタです。

書き方は以下の通りです。

 

上記のように書くと、表示されている一行目のみ文字が赤くなるかと思います。

 

first-letter

first-letterは、最初の一文字だけというセレクタになります。

書き方は以下の通りです。

 

上記のように書くと、最初の一文字目のみ文字が赤くなるかと思います。

 

before, after

要素の直前にある要素を付け加えたいときに使うのが「before

要素の直後にある要素を付け加えたいときに使うのが「after

になります。

 

書き方は以下の通りです。

beforeもafterもcontentプロパティが必須になります。

 

このようにすると、p要素の前後に@が追加されるかと思います。

 

 

 

 

 

今回は疑似要素についてやっていきました。

次回は「プロパティの値」についてです。

 

ではまた次回!

 


  • このエントリーをはてなブックマークに追加
  • LINEで送る