contentプロパティ

content プロパティは、 任意の生成テキストを要素に挿入することを可能にします。 擬似要素 after および before と共に使用されます。

構文

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

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

例

li 要素のテキストの前後に追加テキストを挿入してみましょう：

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

cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

例

挿入されるテキストには様々なスタイルを適用できます。 たとえば、このテキストを色で塗ってみましょう：

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

cssli::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

関連項目