Vlastnost content

Vlastnost content umožňuje vkládat do tagů libovolný generovaný text. Používá se společně s pseudoelementy after a before.

Syntaxe

cssselektor::after {
  content: 'text';
}

cssselektor::before {
  content: 'text';
}

Příklad

Vložme na začátek a konec textu tagu li dodatečný text:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

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

Результат:

Příklad

K vkládanému textu lze aplikovat různé styly. Obarvíme například tento text nějakou barvou:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

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

Результат:

Viz také