Ostatnio edytowany:

::after

Autor: Virtual Patriot

Przeznaczenie selektora ::after

      ::after { ... }
    

Za pomocą selektora ::after oraz właściwości content możemy sprawić, że do końcowej zawartości interesującego nas elementu HTML zostanie dodana dodatkowa treść umieszczona w dodatkowym pseudoelemencie.

Dodatkowe techniczne informacje o selektorze ::after

ograniczenie - elementy HTML

Tylko element HTML (z wyłączeniem elementu input), który w danym momencie może reprezentować zawartość tekstową.

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor ::after

p::after {
  content:"KURS CSS";
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p::after { content:"KURS CSS"; color:red; }
    
p::after

do końcowej zawartości każdego elementu p dodaj dodatkowy pseudoelement

content

wraz z dodatkową treścią

"KURS CSS"

w postaci ciągu znaków KURS CSS

color

koloru

red

czerwonego

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p::after {
        content:"KURS CSS";
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      do końcowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p>
      do końcowej zawartości tego elementu "p"został dodany dodatkowy pseudoelement wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS" o kolorze czerwonym, ponieważ ten element HTML jest elementem "p"
    </p>

    <div>
      do końcowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"
    </div>

  </body>
</html>

Rezultat

do końcowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"

do końcowej zawartości tego elementu "p"został dodany dodatkowy pseudoelement wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS" o kolorze czerwonym, ponieważ ten element HTML jest elementem "p"

do końcowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"

Interpretacja selektora ::after

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

"Internet Explorer" w wersji wcześniejszej niż wersja "9" interpretuje zapis tylko z jednym znakiem dwukropek, czyli zapis ":after".

Edge

tak

Zobacz więcej informacji o interpretacji selektora .