Pseudo-elementy służą urozmaicania strony jednocześnie ograniczając ilość kodu. Stosowanie :before oraz :after umożliwia dodanie kontentu przed i za elementem.
Zastosowanie w praktyce
W HTML napiszemy zdanie.
<p>Zdanie napisane w kodzie HTML.</p>Następnie w CSS przygotujemy styl z uwzględnieniem :before i :after.
p:before { content: "Pierwsze zdanie dodane z poziomu css. "; }
p:after { content: " Drugie zdanie dodane z poziomu css."; }Przykład
Zdanie napisane w kodzie HTML.
Obrazek
W kolejnym przykładzie do akapitu dodamy obrazek, pod zdaniem umieścimy czerwoną linię.
p:before { content: url(../images/arrow2.png); margin-right: 10px; }
p:after { content: ""; display: block; height: 2px; background: red; }Przykład
Zdanie napisane w kodzie HTML.