疑似要素before
疑似要素 before は、要素の前に
テキストを挿入します。 content プロパティと
組み合わせてのみ使用され、挿入するテキストを指定します。
構文
セレクタ::before {
content: 'テキスト';
}
例
li にホバーした時に、その先頭に
テキストを挿入するようにしてみましょう:
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>
li:hover::before {
content: '!!!';
}
:
例
挿入されたテキストには様々なスタイルを 適用できます。例えば、このテキストを 色付けしてみます:
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>
li:hover::before {
color: red;
content: '!!!';
}
:
関連項目
-
タグのテキストの後に挿入を行う疑似要素
after -
タグの属性値を取得する関数
attr -
自動ナンバリングを設定するプロパティ
counter-increment
