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

Подкаст CSS – 014: Псевдоэлементы

Если у вас есть содержательная статья и вы хотите, чтобы первая буква была гораздо большей буквицей — как этого добиться?

Пара абзацев текста с синей буквицей.

В CSS вы можете использовать псевдоэлемент ::first-letter для достижения такой детализации дизайна. 

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Псевдоэлемент похож на добавление или нацеливание на дополнительный элемент без необходимости добавления дополнительного HTML. Этот пример решения с использованием ::first-letter является одним из многих псевдоэлементов. У них есть ряд ролей, и в этом уроке вы узнаете, какие псевдоэлементы доступны и как их можно использовать.

::before и ::after

Псевдоэлементы ::before и ::after создают дочерний элемент внутри элемента только в том случае, если вы определяете свойство content .

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content может быть любая строка, даже пустая, но помните, что все, кроме пустой строки, скорее всего, будет объявлено программой чтения с экрана. Вы можете добавить url изображения, при этом изображение будет вставлено в его исходных размерах, поэтому вы не сможете изменить его размер. Вы также можете вставить counter .

После создания элемента ::before или ::after вы можете стилизовать его по своему усмотрению без каких-либо ограничений. Вы можете вставить элемент ::before или ::after только в элемент, который будет принимать дочерние элементы ( элементы с деревом документа ), поэтому такие элементы, как <img /> , <video> и <input> не будут работать.

::first-letter

С этим псевдоэлементом мы познакомились в начале урока. Стоит знать, что не все свойства CSS можно использовать при настройке ::first-letter . Доступные свойства:

  • color
  • свойства background (например, background-image )
  • свойства border (например, border-color )
  • float
  • свойства font (такие как font-size и font-weight )
  • свойства текста (такие как text-decoration и word-spacing ) 
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Псевдоэлемент ::first-line позволит вам стилизовать первую строку текста только в том случае, если элемент с примененным ::first-line имеет display значение block , inline-block , list-item , table-caption или table-cell . 

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Как и псевдоэлемент ::first-letter , вы можете использовать только подмножество свойств CSS:

  • color
  • свойства background
  • свойства font
  • свойства text

::backdrop

Если у вас есть элемент, представленный в полноэкранном режиме, например <dialog> или <video> , вы можете стилизовать фон — пространство между элементом и остальной частью страницы — с помощью псевдо ::backdrop элемент: 

video::backdrop {
  background-color: goldenrod;
}

::marker

Псевдоэлемент ::marker позволяет задать стиль маркера или номера для элемента списка или стрелки элемента <summary> .

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Для ::marker поддерживается только небольшое подмножество свойств CSS:

  • color
  • content
  • white-space
  • свойства font
  • свойства animation и transition

Вы можете изменить символ маркера, используя свойство content . Вы можете использовать это, например, для установки символов плюс и минус для закрытого и пустого состояний элемента <summary> .

::selection

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

::selection {
  background: green;
  color: white;
}

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Как и в случае с другими псевдоэлементами, разрешены только подмножества свойств CSS:

  • color
  • background-color , но не background-image
  • свойства text

::placeholder

Поддержка браузера

  • Хром: 57.
  • Край: 79.
  • Фаерфокс: 51.
  • Сафари: 10.1.

Источник

Вы можете добавить вспомогательную подсказку к элементам формы, например <input> , с атрибутом placeholder . Псевдоэлемент ::placeholder позволяет стилизовать этот текст. 

input::placeholder {
  color: darkcyan;
}

::placeholder поддерживает только подмножество правил CSS:

  • color
  • свойства background
  • свойства font
  • свойства text

::cue

Поддержка браузера

  • Хром: 26.
  • Край: 79.
  • Фаерфокс: 55.
  • Сафари: 7.

Источник

Последним в этом обзоре псевдоэлементов является псевдоэлемент ::cue . Это позволяет вам стилизовать сигналы WebVTT, которые являются заголовками элемента <video> .

Вы также можете передать селектор в ::cue , который позволит вам стилизовать определенные элементы внутри заголовка. 

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Проверьте свое понимание

Проверьте свои знания псевдоэлементов

Что из перечисленного не является псевдоэлементами?

::before
Не забудьте добавить content: ''; .
::first-paragraph
Этого нет в CSS.
::after
Не забудьте добавить content: ''; .
::marker
Это элемент маркера, когда вы используете элемент списка или тип отображения.
::pencil
Этого нет в CSS.
:active
Это псевдокласс, а не псевдоэлемент.

Псевдоэлементы можно найти в HTML-файле.

Истинный
Хотя DevTools может отображать псевдоэлементы на панели «Элементы», псевдоэлементы не будут найдены в HTML, они принадлежат браузеру.
ЛОЖЬ
На них можно настроить CSS, но они не будут найдены в HTML.