Что такое псевдоэлементы
Псевдоэлементы прикрепляются к селекторам подобно псевдоклассам и позволяют стилизовать определенные части элементов:
селектор::псевдоэлемент {
свойство: значение;
}
Буквица и первая строка
Псевдоэлемент first-letter выделяет первую букву элемента, а first-line — первую строку:
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before и After
Псевдоэлементы before и after совместно с content позволяют добавлять контент без изменения HTML:
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: ";
}
p:before {
content: url(images/jam.jpg);
}
Важно: старые версии Internet Explorer могут не поддерживать before и after.