Псевдоэлементы CSS используются для добавления специальных эффектов к некоторым селекторам. Вам не нужно использовать JavaScript или любой другой скрипт, чтобы использовать эти эффекты. Простой синтаксис псевдоэлемента выглядит следующим образом:
selector:pseudo-element {property: value}
Классы CSS также могут использоваться с псевдоэлементами —
selector.class:pseudo-element {property: value}
Наиболее часто используемые псевдоэлементы следующие:
| Sr.No. | Значение и описание |
|---|---|
| 1 |
:первая строка Используйте этот элемент, чтобы добавить специальные стили к первой строке текста в селекторе. |
| 2 |
:первое письмо Используйте этот элемент, чтобы добавить специальный стиль к первой букве текста в селекторе. |
| 3 |
:до Используйте этот элемент, чтобы вставить некоторый контент перед элементом. |
| 4 |
:после Используйте этот элемент для вставки некоторого содержимого после элемента. |
:первая строка
Используйте этот элемент, чтобы добавить специальные стили к первой строке текста в селекторе.
:первое письмо
Используйте этот элемент, чтобы добавить специальный стиль к первой букве текста в селекторе.
:до
Используйте этот элемент, чтобы вставить некоторый контент перед элементом.
:после
Используйте этот элемент для вставки некоторого содержимого после элемента.
Псевдоэлемент первой строки
В следующем примере показано, как использовать элемент : first-line для добавления специальных эффектов к первой строке элементов в документе.
<html> <head> <style type = "text/css"> p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } </style> </head> <body> <p class = "noline"> This line would not have any underline because this belongs to nline class. </p> <p> The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element. </p> </body> </html>
Он выдаст следующую ссылку —
Псевдоэлемент: первая буква
В следующем примере показано, как использовать элемент : first-letter для добавления специальных эффектов к первой букве элементов в документе.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>
Это даст следующую черную ссылку —
Псевдоэлемент: before
В следующем примере показано, как использовать элемент : before для добавления содержимого перед любым элементом.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>
Это даст следующую черную ссылку —
Псевдоэлемент: after
В следующем примере показано, как использовать элемент : after для добавления некоторого содержимого после любого элемента.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>
Это даст следующую черную ссылку —