【CSSとは (3-11)】 ::before / ::after 擬似要素について

カテゴリ : CSSとは, html/css

要素名::beforeと要素名::afterによる擬似要素の作成

CSSのセレクタ部分に要素名::before（または要素名::after）と指定することで、要素の直前（または直後）に内容を挿入することができます。

内容の挿入はcontentプロパティに値を入れて行います。

記述例（html）：

<ul>
<li>text</li>
<li>texttexttexttext</li>
<li>texttext</li>
<li>texttexttexttexttexttext</li>
<li>texttext</li>
</ul>

記述例（css）：

li::before{
 content:"【"
 }
 li::after{
 content:"】"
 }

上記の命令で、各リストの前後に【】が挿入されます。デモ

またcontentの値を空にする場合””とします。内容を空にしてCSSの装飾のみ指定することで、通常では実現が難しい装飾が可能となります。