Подкаст 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;
}
Проверьте свое понимание
Проверьте свои знания псевдоэлементов
Что из перечисленного не является псевдоэлементами?
::pencil
::before
::marker
::first-paragraph
::after
:active
Псевдоэлементы можно найти в HTML-файле.