Vlastnosť content

Vlastnosť content umožňuje vkladať do elementov ľubovoľný generovaný text. Používa sa spoločne s pseudoelementmi after a before.

Syntax

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

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

Príklad

Vložme na začiatok a koniec textu elementu li ďalší text:

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

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

Результат:

Príklad

K vloženému textu je možné aplikovať rôzne štýly. Zafarbime napríklad tento text na nejakú farbu:

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

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

Результат:

Pozri tiež