CSS. Селекторы псевдо-элементов
15.02.2014
Теги: CSS • HTML • Web-разработка • Верстка
Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент ::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия.
p::first-letter {
font-size: 120%;
}
Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (first-letter, first-line, before и after), могут быть записаны и с одним двоеточием.
Псевдо-элемент ::first-letter
Псевдо-элемент ::first-letter позволяет применить стиль к первой букве в тексте родительского элемента:
p::first-letter {
font-size: 150%;
font-weight: bold;
}Псевдо-элемент ::first-line
Псевдо-элемент ::first-line применяет стиль к первой строке текста в элементе:
p::first-line {
color: blue;
}
Особенность псевдо-элемента ::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки.
Псевдо-элементы ::before и ::after
Для добавления генерируемого содержимого в документ используются псевдо-элементы ::before и ::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.
Допустим, у нас есть достаточно большой по объему текст, он содержит ссылки, но по оформлению они практически никак не отличаются от остального текста. И нам нужно перед каждой ссылкой поместить небольшую иконку, которая будет указывать пользователям, что это ссылка:
a {
text-decoration: none;
color: black;
}
a::before {
content: url("link.png");
}Поиск: CSS • HTML • Web-разработка • Верстка • Селектор • Псевдо-элемент