疑似要素 after

疑似要素 after は、要素の後にテキストを挿入します。content プロパティと組み合わせてのみ使用され、このプロパティが挿入するテキストを指定します。

構文

セレクタ::after {
	content: 'テキスト';
}

li にホバーしたときに、その末尾にテキストが挿入されるようにしてみましょう：

<ul>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
</ul>

li:hover::after {
	content: '!!!';
}

挿入されるテキストには様々なスタイルを適用できます。例えば、このテキストを何らかの色に染めてみましょう：

<ul>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
</ul>

li:hover::after {
	color: red;
	content: '!!!';
}