カテゴリー: 擬似要素

【CSS】::after(擬似要素)：要素の直後にコンテンツを挿入する

See the Pen
::after by linlin (@linlin098765)
on CodePen.

<div>ああああ</div>

div::after{content:"-良い良い";}

　CSSの::afterは、要素の直後にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

See the Pen
::before by linlin (@linlin098765)
on CodePen.

<div>ああああ</div

div::before{content:"良い良い-";}

　CSSの::beforeは、要素の直前にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

<div>ああああああああ</div>

div::first-letter{color:red;}

　CSSの::first-letterは、ブロック要素の最初の文字にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

<p>あああああ<br>
   良い良いい
</p>

p::first-line{color:red;}

　CSSの::first-lineは、ブロック要素の最初の行にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。