Autor publikacji: Virtual Patriot - Administrator

::after

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the ::after pseudo-element (LV3)

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.

Informacje techniczne 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"