Псевдоэлементы :before и: after

Псевдоэлементы :before и: after

С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и «после» содержимого элемента, принадлежащего дереву HTML-документа. Используя эти псевдоэлементы в сочетании со свойством content, вы можете определить содержимое и место, куда оно должно быть вставлено.

Рассмотрим простой пример. Пусть браузер сам расставит точки в конце абзацев в документе:

p:after { content: "." }

Надо помнить, что псевдоэлементы: before и: after могут быть связаны с элементом HTML-документа. Тогда они будут наследовать его свойства. Чтобы вы лучше разобрались, приведу такой пример:

p:before {

content: open-quote;

color: red

}

Теперь перед каждым элементом P будет добавлена кавычка красного цвета, а шрифт кавычки будет такой же, какой задан всему абзацу.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Псевдоэлементы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в


Псевдоэлементы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в


7.4. Псевдоэлементы и псевдоклассы

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

7.4. Псевдоэлементы и псевдоклассы В языке CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не


Псевдоэлементы :before и: after

Из книги автора

Псевдоэлементы :before и: after С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и