Добавить в корзинуПозвонить
Найти в Дзене
GoToWeb

Создание сайтов с нуля - урок 32 - Псевдоэлементы CSS

Псевдоэлементы можно сравнить с виртуальными элементами. Они не существуют в дереве документа, т.е. они создаются с помощью CSS, но их можно обрабатывать и стилизовать как обычные элементы HTML. 2 самых часто используемых псевдоэлемента – это :before и :after. Псевдоэлемент :before добавляет содержимое (например, текст) перед контентом элемента, заданного в селекторе. Обязательным условием при этом является добавления CSS-свойства content. Интересно, что добавленный в псевдоэлемент текст нельзя выделить. h1:before {content: "Вставка перед контентом";} Псевдоэлемент :after также используется для добавления содержимого, но уже после контента элемента, заданного в селекторе. h1:after {content: "Вставка после контента";} Псевдоэлемент :first-letter выбирает первый символ в строке текста. h1:first-letter  {font-size: 5em;} Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными. p:first-line {background: orange;} Псевдоэлемен

Псевдоэлементы можно сравнить с виртуальными элементами. Они не существуют в дереве документа, т.е. они создаются с помощью CSS, но их можно обрабатывать и стилизовать как обычные элементы HTML.

2 самых часто используемых псевдоэлемента – это :before и :after.

Псевдоэлемент :before добавляет содержимое (например, текст) перед контентом элемента, заданного в селекторе. Обязательным условием при этом является добавления CSS-свойства content.

Интересно, что добавленный в псевдоэлемент текст нельзя выделить.

h1:before {content: "Вставка перед контентом";}

Псевдоэлемент :after также используется для добавления содержимого, но уже после контента элемента, заданного в селекторе.

h1:after {content: "Вставка после контента";}

Псевдоэлемент :first-letter выбирает первый символ в строке текста.

h1:first-letter  {font-size: 5em;}

Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

p:first-line {background: orange;}

Псевдоэлемент :selection используется для стилизации выделенного текста.

:selection  {color: orange; background: #333;}