3

kurs

css

Lekcja 17: Pseudo-elementy :before :after

css

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ę, cały akapit będzie obramowany na czarno.

p { padding: 5px; border: 1px solid black; }
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.

comments powered by Disqus

Do góry