CSS псевдо-елементи се използват за добавяне на специални ефекти към някои селектори. Синтаксисът на псевдо-елемента:
CSS класовете могат да бъдат използвани с псевдо-елементи:
:: first line псевдо-елемента
:: first line псевдо-елемента се използва за добавяне на специален стил на първата линия на един текст.
:: first line може да се прилагат само за блокови елементи.
Форматиране на първия ред на текста в параграфи:
Следните свойства се прилагат за :: first line :
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter псевдо-елемента
::first-letter псевдо-елемента се използва за добавяне на специален стил на първата буква от текста.
::first-letter може да се прилага само за блок елементи.
Форматирайте първата буква от текста в параграфа:
Следните свойства се отнасят до първия :: first-letter:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (само ако „float“ е „none“)
- text-transform
- line-height
- float
- clear
Псевдо-елементи и CSS класове
Псевдо-елементите могат да бъдат комбинирани с CSS класове:
Примерът по-горе ще покаже първата буква на всеки параграф, който е в статия – в червено.
Множество псевдо-елементи
Няколко псевдо-елементи могат също да бъдат комбинирани.
В следващия пример, първата буква на параграфа ще бъде в червено, в размер на шрифта хх. Останалата част от първия ред ще бъде синьо, в small-caps шрифт. Останалата част от параграфа ще е със стандартни размери:
:: before псевдо-елементa
:: before псевдо-елемента може да се използва за въвеждане на съдържание, преди съдържанието на даден елемент. Следващият пример вмъква Опитайте сами »
:: after псевдо-елемента
:: after псевдо-елемента може да се използва за въвеждане на съдържание, след съдържанието на елемент.
Следващият пример вмъква изображение след всеки <h1> елемент:
Всички CSS Псевдо Класове/Елементи
| Селектор | Пример | Описание |
|---|---|---|
| :link | a:link | Хваща всички не-посетени линкове |
| :visited | a:visited | Всички посетени линкове |
| :active | a:active | Всички активни линкове |
| :hover | a:hover | Линкове при поставяне на мишката върху тях |
| :focus | input:focus | Хваща input елементите, които имат focus |
| ::first-letter | p::first-letter | Хваща първата буква на всеки <p> елемент |
| ::first-line | p::first-line | Първия ред на всеки <p> елемент |
| :first-child | p:first-child | Всеки <p> елемент, който е first child на parent-а си |
| ::before | p::before | Добавяне на съдържание преди всеки <p> елемент |
| ::after | p::after | Добавяне на съдържание след всеки <p> елемент |
| :lang(language) | p:lang(it) | Хваща всеки <p> елемент със lang атрибут, чиято стойност започва с „it“ |