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

Подкаст 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

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

input::placeholder {
  color: darkcyan;
}

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

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

::cue

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

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

video::cue {
  color: yellow;
}

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

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

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

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