CSS => Pseudoelementy

Wprowadzenie

Pseudoelementy, podobnie jak pseudo-klasy, są dodawane do selektorów CSS, ale zamiast opisywania specjalnego stanu, pozwalają na określenie zakresu i styl niektórych części elementu HTML.

Na przykład pseudoelement :: first-letter kieruje tylko pierwszą literę elementu blokowego określoną przez selektor.

Składnia

selector :: pseudo-element {właściwość: wartość}

Parametry

pseudoelement	Opis
`::after`	Wstaw treść za zawartością elementu
`::before`	Wstaw zawartość przed zawartością elementu
`::first-letter`	Wybiera pierwszą literę każdego elementu
`::first-line`	Wybiera pierwszy wiersz każdego elementu
`::selection`	Dopasowuje część elementu wybraną przez użytkownika
`::backdrop`	Służy do tworzenia tła, które ukrywa dokument bazowy dla elementu w stosie górnej warstwy
`::placeholder`	Pozwala stylizować tekst zastępczy elementu formularza (eksperymentalny)
`::marker`	Do stosowania atrybutów w stylu listy do danego elementu (eksperymentalne)
`::spelling-error`	Reprezentuje segment tekstowy, który przeglądarka oznaczyła jako niepoprawnie napisaną (eksperymentalna)
`::grammar-error`	Reprezentuje segment tekstowy, który przeglądarka oznaczyła jako niepoprawny gramatycznie (eksperymentalny)

Uwagi

Czasami widać podwójne dwukropkami ( :: ) zamiast tylko jednego ( : ). Jest to sposób, aby oddzielić pseudoklas z pseudo-elementów, ale niektóre starsze przeglądarki takie jak Internet Explorer 8 obsługuje tylko jeden dwukropek ( : ) dla pseudo-elementów.
W selektorze można użyć tylko jednego pseudoelementu. Musi pojawić się po prostych selektorach w zestawieniu.
Pseudoelementy nie są częścią DOM, dlatego nie można na nie celować przez :hover lub inne zdarzenia użytkownika.

Pseudoelementy

Pseudoelementy są dodawane do selektorów, ale zamiast opisywać specjalny stan, pozwalają stylizować określone części dokumentu.

Atrybut content jest wymagany do renderowania pseudoelementów; jednak atrybut może mieć pustą wartość (np. content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudo-elementy na listach

Pseudoelementy są często używane do zmiany wyglądu list (głównie list nieuporządkowanych, ul ).

Pierwszym krokiem jest usunięcie domyślnych wypunktowań na liście:

ul {
  list-style-type: none;
}

Następnie dodajesz niestandardową stylizację. W tym przykładzie utworzymy pola gradientu dla pocisków.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Wynik

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Pseudoelementy

Szukaj…