» » Псевдоэлементы в css3
50 0  

Псевдоэлементы в 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;}

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019