Pseudo elementy

CSS pseudo-elements to są specjalne selektory, które pozwalają na dostęp do składników virtualnych elementów HTML, takich jak pierwszy wiersz lub pierwsze litery danego elementu. Są one używane do dodawania stylów do części elementu, które nie są bezpośrednio dostępne jako elementy DOM.

::after dodaje dodatkowy element na końcu elementu HTML, np. strzałkę lub ikonkę.

										
.cta {
  display: inline-block;
  padding: 10px 20px;
  background-color: #9d4d4d;
  color: white;
  text-align: center;
  position: relative;
}

.cta::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #f39696 transparent;
}

::before dodaje dodatkowy element na początku elementu HTML, np. ikonkę.

										
.highlighted-text {

  background-color: yellow;
  padding: 5px 10px;
  display: inline-block;
  position: relative;
}

.highlighted-text::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background-color: yellow;
}

::first-letter stylizuje pierwszą literę w elemencie HTML, np. zmiana koloru lub rozmiaru.

										
p::first-letter {
  font-size: 32px;
  font-weight: bold;
  color: blue;
  float: left;
  margin-right: 10px;
}

::first-line stylizuje pierwszą linię w elemencie HTML, np. zmiana koloru lub czcionki.

										
.highlighted-text {
  font-size: 20px;
  font-weight: bold;
}

.highlighted-text::first-line {
  color: red;
}

::marker stylizuje punktor w liście numerowanej, np. zmiana koloru i tła.

										
ol {
  list-style-type: none;
  padding: 0;
  color: #7e7c7c;
}

li::marker {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: white;
  background-color: blue;
  margin-right: 10px;
  padding: 5px 0;
}

::selection stylizuje tekst zaznaczony przez użytkownika, np. zmiana koloru i tła.

										
p::selection {
  background-color: #d48852;
  color: white;
}

Notatka

Te przykłady pokazują tylko niektóre z możliwości, jakie dają pseudo-elementy CSS. Mogą być one użyte do dodawania różnego rodzaju elementów dekoracyjnych, takich jak ikony, symboli, tła i inne. Zawsze należy pamiętać o dostępności i kompatybilności z przeglądarkami, ale poza tym pseudo-elementy są bardzo przydatne w tworzeniu bardziej skomplikowanych stylów.