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

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

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> не будут работать.

Исключением является input[type="checkbox"]. Ему разрешено иметь дочерние псевдоэлементы.

::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-letter можно только в блочных контейнерах. Поэтому он не будет работать, если вы попытаетесь добавить его в элемент, имеющий display: inline.

::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;
}

Псевдоэлемент ::backdrop поддерживается во всех основных браузерах, кроме Safari.

::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

Заполнитель placeholder не является <label> и не должен использоваться вместо <label>. Элементы формы должны быть снабжены метками, иначе они будут недоступны.

::cue

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

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

video::cue {
    color: yellow;
}

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

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

Источник: Pseudo-elements

Комментарии