Pseudo-element after

Pseudo-elementet after setter inn tekst etter element. Brukes bare sammen med egenskapen content, som angir teksten som skal settes inn.

Syntaks

cssvelger::after {
  content: 'tekst';
}

Eksempel

La oss gjøre slik at ved å peke på li settes teksten inn på slutten:

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Eksempel

Man kan bruke ulike stiler på teksten som settes inn. La oss for eksempel farge denne teksten i en eller annen farge:

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Se også