Во многих статьях по HTML или CSS вы наверняка неоднократно сталкивались с понятием элемента - это любой тег HTML, который имеет внутреннее содержимое - как правило, текст или картинку. Т.е. это абзац (<p>), любой из заголовков (<h1> ... <h6>), блочная цитата (<blockquote>), раздел, статья или div (<section>, <article>, <div>) и т.п. Что тогда такое псевдоэлемент?
Что такое псевдоэлемент?
Псевдоэлемент - это некий контент, которым можно управлять с помощью CSS. Причем управление касается либо какой-то части элемента (первой буквы или строки), выделения текста или несуществующего в html-разметке контента.
Добавлять псевдоэлементы нужно к существующим элементам, в основном к селекторам тегов, классов или id. Поэтому в коде css-файла псевдоэлементы записываются сразу после основного селектора с одним или двумя двоеточиями перед своим названием:
|
1 2 3 |
selector::pseudo-element { свойство: значение; } |
Например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
*::selection{ color:#ff0; background: #000: } h2::before { content: "News: "; } .readmore:after { content: " >"; } blockquote:first-letter{ color: red; font-size: 2em; font-weight: bold; } p:first-line { color: #0a4; font-family: Cambria, serif; font-size: 1.2em; } |
Обратите внимание, что в некоторых случаях перед наименованием псевдоэлемента стоит одно двоеточие, а в других - 2 двоеточия. И тот, и другой вариант вполне допустимы, т.к. синтаксис CSS2 позволяет писать их с одним двоеточием, а синтаксис CSS3 - с двумя. Второе двоеточие в CSS3 было введено для того, чтобы отличать псевдоклассы (:hover, :active, :focus и т.д.) от псевдоэлементов. Поскольку браузеры понимают оба синтаксиса, неважно, в сущности, одно или два двоеточия вы поставите перед псевдоэлементами. Главное, чтобы вы не делали пробел ни ДО, ни После двоеточия(-ий), т.к. это приведет к ошибке. Исключение составляет псевдоэлемент ::selection, который всегда указывается с двумя двоеточиями.
Описание псевдоэлементов
Псевдоэлемент ::selection
Псевдоэлемент ::selection необходим для изменения стиля выделенного пользователем текста. Вы можете использовать для него такие стилевые следующие свойства, как color, background и background-color.
|
1 2 3 4 |
*::selection { color: #ff0; background: #000; } |
Firefox использует нестандартный псевдоэлемент ::-moz-selection.
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line позволяет определить стиль первой строки текста блочных или блочно-строчных элементов, а также заголовков и ячеек таблиц.
Причем стили будут относиться именно к форматированию всей первой строки, какой бы длинной или короткой она ни была. Длина строки в основном зависит от семейства шрифта и его размера, размера окна браузера или ширины родительского блока. В стилевых правилах можно использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
|
1 2 3 4 5 |
p:first-line { color: #0a4; font-family: Cambria, serif; font-size: 1.2em; } |
Если необходимо добавить отступ к первой строке, то делать это нужно для родительского элемента с помощью css-свойства text-indent:
|
1 2 3 |
p { text-indent: 15px; } |
Посмотреть пример:
See the Pen Pseudo-elements by Elen (@ambassador) on CodePen.18892
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter управляет стилевыми свойствами первого символа в тексте элемента, к которому его добавляют. Поскольку изменяется первая буква элемента, в стилях псевдоэлемента ::first-letter обычно используют css-свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
|
1 2 3 4 5 |
blockquote:first-letter{ color: red; font-size: 2em; font-weight: bold; } |
Псевдоэлементы ::before и ::after
Это псевдоэлементы с генерируемым контентом, т.е. в них можно задать некое содержимое, которого в html-разметке НЕ существует, но которое отобразится при использовании css-свойств для псевдоэлементов ::before и ::after. Эти псевдоэлементы не только управляют цветом, фоном или шрифтом своего содержимого, а и создают это содержимое, т.к. имеют обязательное свойство content:
|
1 2 3 4 5 6 |
h2::before { content: "News: "; } .readmore:after { content: " >"; } |
Без свойства content эти элементы вообще не появятся на экране, какие бы стилевые правила вы им не задавали. Само свойство подразумевает использование, как правило, какого-то текста - слова, словосочетания, одного символа или знака, в том числе в формате Unicode. Также можно назначить для этого свойства пустые кавычки, если никакое текстовое содержимое вы не хотите выводить на экран. Например, нужно сгенерировать точку перед элементом меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#top-menu li a::before { content: ''; display: inline-block; background-color: #fff; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; margin-bottom: 3px; } #top-menu li a:hover:before, #top-menu li a.active:before { background-color: #86c840; } |
Посмотреть на примере:
See the Pen Horizontal Menu with ::before by Elen (@ambassador) on CodePen.18892
Такого же типа меню, но не с точками перед каждым пунктом, а с треугольниками после текста можно создать, используя псевдоэлемент ::after:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#top-menu li a { font-family: 'Bitter', serif; font-weight: 600; } #top-menu li a:hover, .active { color: #900; } #top-menu li a::after { content: ''; display: inline-block; border: 6px solid transparent; border-left-color: #fff; margin-left: 7px; } #top-menu li a:hover:after, #top-menu li a.active:after { border-left-color: #900; } |
Пример "вживую":
See the Pen Horizontal Menu with ::after by Elen (@ambassador) on CodePen.dark
Использование различных значений для свойства content в ::before и ::after
Свойство content в псевдоэлементах ::before и ::after может иметь различные значения - не только текст или пустые кавычки. Например, можно задать кавычки разных видов с помощью свойства content: open-quote (открывающие) или content: close-quote (закрывающие). Сделать это можно для блочных цитат таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
blockquote { background-color: #f2f2f2; padding: 10px 15px; line-height: 1.5; box-shadow: 4px 4px #57f; } blockquote:before, blockquote:after { font-size: 1.5em; font-weight: bold; color: #57f; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } |
Также с помощью этих псевдоэлементов можно отключить кавычки, которые добавляются для такого элемента, как q (цитата), используя свойство content со значениями no-open-quote и no-close-quote. Правда, пользоваться им, скорей всего, вы будете крайне редко.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
q { display:block; margin: 7px; color: #f40; font-weight: bold; } q.no-quots:before { content: no-open-quote; } q.no-quots:before { content: no-close-quote; } |
Посмотрите, как это будет выглядеть:
See the Pen Pseudo-elements ::before and ::after for quotes by Elen (@ambassador) on CodePen.dark
Использование функции attr() для ::before и ::after
В примере ниже псевдоэлементы ::before и ::after используются для создания всплывающих подсказок над ссылками.
В отличие от других вариантов значений для свойства content здесь используется функция attr(), в скобках которой можно указать любой атрибут (title, src, id, class и т.д.), а также любой из data-атрибутов, которые вы можете придумать сами.
Тут использован код, в котором для псевдоэлемента :before в качестве значения для свойства content назначен атрибут title, указанный для элемента ссылки <a>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
a { position:relative; display: inline-block; } a:before { content: attr(title); display: block; min-width: 120px; background-color: #000; color: #fff; padding: 5px 10px; text-align: center; font-size: 0.9em; position:absolute; top: -2.1em; left: 20%; opacity: 0; transform: translate(-50px); transition: .4s ease-out; } a:after { content:""; display: inline-block; border: 8px solid transparent; border-top-color: #000; position:absolute; top: -2px; left: 45%; opacity: 0; transform: translate(-50px); transition: .4s ease-out; } a:hover:before, a:hover:after { opacity: 1; transform: translate(0); } |
Вот что получилось:
See the Pen Pseudo-elements ::before and ::after for tooltips by Elen (@ambassador) on CodePen.dark
Аналогом использования атрибута title может быть любой data-атрибут. Прелесть таких атрибутов заключается в том, что у них нет ограничений по количеству и по названиям - вы можете придумать что-то свой, например, data-age="18", data-user="Иванов Геннадий", data-user-id="167894", data-pic="images/pic1.png" и т.д.
Второй пример использует атрибут data-text для кнопки:
|
1 |
<button data-text="Best Offer">Learn More</button> |
И форматирование псевдоэлемента ::before подразумевает, что сначала мы "прячем" этот элемент слева от кнопки, используя для button свойство overflow: hidden, а для ::before - transform: translate(-120%), а при наведении показываем текст data-атрибута:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
button { cursor: pointer; padding: 10px 20px; background-color: #c00; color: #fff; font-size: 1em; border: 1px solid #900; border-radius: 6px; box-shadow: 2px 2px #600; position: relative; overflow: hidden; } button::before { content: attr(data-text); display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: inherit; background-color: #600; transform: translate(-120%); transition: transform .6s; } button:hover::before { transform: translate(0); } |
Очень часто для таких hover-эффектов могут использоваться css-свойства группы transform, особенно translate(), поэтому иметь о них представление нужно обязательно.
Еще один пример работы с data-атрибутами и функцией attr() для реализации эффекта наведения на изображение вы найдете в статье "Использование data-атрибутов в HTML, CSS, JavaScript и jQuery".
Пример подчеркивания ссылки
Для ссылки выполнено подчеркивание с помощью анимации transition и свойства border для псевдоэлемента ::before.
See the Pen Underline Animation - Link by Cojea Gabriel (@gabrielcojea) on CodePen.18892
Ссылки на статьи на английском:
