Pseudoelement CSS ::after

Pseudoelement CSS ::after

Pseudoelement CSS ::after dodaje za wybranym elementem wirtualny element śródliniowy, którego treścią jest wartość własności content. Element dodany przez pseudoelement ::after jest ostatnim dzieckiem wybranego elementu.

Pseudoelement ten ma różne zastosowania. Jedno z nich, dodawanie znaków cudzysłowu do elementu blockquote, zostało przedstawione w opisie pseudoelementu ::before. Innym może być tworzenie chmurek z dodatkowymi objaśnieniami pojawiających się po najechaniu kursorem na wybrany element.

Jeszcze innym zastosowaniem pseudoelementu ::after jest dodanie specjalnej ikony do odnośników prowadzących do stron zewnętrznych, aby wyróżnić je wizualnie. Ten sposób jego użycia jest dokładnie opisany w Kursie HTML i CSS w podrozdziale Linki wychodzące.

Przykład użycia ::after

W poniższym przykładzie na końcu każdego akapitu zostanie dodany symbol ¶.

<style>
  p::after {content: "\b6"}
</style>
...
<p>Pierwszy akapit</p>
<p>Drugi akapit</p>
<p>Trzeci akapit</p>
<p>Czwarty akapit</p>

Efekt:

Efekt użycia pseudoelementu CSS ::after

Składnia ::after

Składnia pseudoelementu ::after:

::after {
  content "...";
  ...
}
Udostępnij:
Share

Podobał Ci się ten artykuł?

Oceń go!

Średnia 0 / 5. Liczba głosów: 0

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

blank
Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Dodaj komentarz