疑似要素 after

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

構文

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

例

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

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

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

Результат:

例

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

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

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

Результат:

関連項目