no-image

擬似要素

要素:first-line/最初の行

最初の行だけスタイルを適用。

結果

私の好きなくだものはメロンです。それは
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。

解説

要素::first-lineは、改行があるまで適用されます。
自動改行の場合も、最初の行にだけ適用されます。

要素:first-letter/最初の文字

最初の文字だけスタイルを適用。

結果

私の好きなくだものはメロンです。それは
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。

解説

要素::first-letterは、最初の文字だけに適用されます。
例題のコツは、「font-size: 300%;」と「float」をかけているところです。
文字をパーセントにすると、3段落まで大きくしたいときは300%にすると良いです。

要素::before/直前に文字を挿入

直前に挿入する内容。

結果

私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。

解説

要素::beforeは、本文の直前に挿入する内容です。

要素::after/直後に文字を挿入

直後に挿入する内容。

結果

私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。

解説

要素::afterは、本文の直後に挿入する内容です。

要素::selection/選択範囲

選択範囲。

結果

このエリアをドラッグしてみてください。
私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。

解説

要素::selectionは、ドラッグした選択範囲の表現を変更します。