疑似要素before

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

構文

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

例

li にホバーした時に、その先頭に テキストを挿入するようにしてみましょう:

html<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

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

Результат:

例

挿入されたテキストには様々なスタイルを 適用できます。例えば、このテキストを 色付けしてみます:

html<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

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

Результат:

関連項目