こんにちは！
UPSTARTSのSベンです！
今回は「疑似要素」についての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 |
<body> <p>ゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴムゴム</p> </body> |
疑似要素
疑似要素とは、
ある要素の一部を指定するときに使うセレクタになります。
first-line
first-lineは、ある要素の一行目のみというセレクタです。
書き方は以下の通りです。
|
1 2 3 |
p:first-line { color: red; } |
上記のように書くと、表示されている一行目のみ文字が赤くなるかと思います。
first-letter
first-letterは、最初の一文字だけというセレクタになります。
書き方は以下の通りです。
|
1 2 3 |
p:first-letter { color: red; } |
上記のように書くと、最初の一文字目のみ文字が赤くなるかと思います。
before, after
要素の直前にある要素を付け加えたいときに使うのが「before」
要素の直後にある要素を付け加えたいときに使うのが「after」
になります。
書き方は以下の通りです。
beforeもafterもcontentプロパティが必須になります。
|
1 2 3 4 5 6 |
p:before { content: "@@"; } p:after { content: "@@"; } |
このようにすると、p要素の前後に＠が追加されるかと思います。
今回は疑似要素についてやっていきました。
次回は「プロパティの値」についてです。
ではまた次回！
