Псевдоэлементы в css3
Псевдоэлементы - это те части верстки которых реально не существуют в HTML документе.
С псевдоэлементами существует маленькое недорозумение, так как по правилам они должны начинатся с двойного двоеточия ::, но на практике все используют только одинарное:. Браузеры сами добавляют второе двоеточие.
Примеры использования псевдоэлементов:
| ::before | p::before | Вставляет указанное в content:'' содержимое в начало |
| ::after | p::after | Вставляет указанное в content:'' содержимое в конец |
| ::first-line | p::first-line | Позволяет стилизовать первую строку каждого элемента <p>, |
| ::first-letter | p::first-letter | Позволяет создавать инициал (буквицу) — стилизовать начальный символ каждого элемента <p>. |
| ::selection | p::selection | Оформит выделенный (мышкой) текст внутри <p>. Для firefoxнужен префикс moz (p::-moz-selection) |
Псевдоэлемент как правило добавляют для вывода шрифтовых иконок, создания фигур css, и для оформления дизайна блоков.
Также псевдоэлементы незаменимы для показа спрайтов:
.sprite:before {content:"";display:block;
width:15px;height:18px;
background:url(../images/sprit.png) -1726px -491px;
position:absolute;top:7px; left:4px;
opacity:.6;}