Псевдо-элементы CSS используются для добавления специальных эффектов к некоторым селекторам. Для использования этих эффектов вам не нужно использовать JavaScript или любой другой скрипт. Простой синтаксис псевдо-элемента заключается в следующем:
селектор : псевдо - элемент { свойство : значение }Классы CSS также могут использоваться с псевдо-элементами -
селектор . Класс : псевдо - элемент { свойство : значение }Наиболее часто используемые псевдо-элементы заключаются в следующем:
| Свойство | Описание |
|---|---|
| :first-line | Используйте этот элемент для добавления специальных стилей в первую строку текста в селекторе. |
| :first-letter | Используйте этот элемент, чтобы добавить специальный стиль к первой букве текста в селекторе. |
| :before | Используйте этот элемент для вставки некоторого содержимого перед элементом. |
| :after | Используйте этот элемент для вставки некоторого содержимого после элемента. |
Псевдо-элемент :first-line
В следующем примере показано, как использовать элемент :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 noline 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>
Это приведет к следующему результату -
Первая строка этого абзаца будет подчеркнута, как определено в правиле CSS выше. Остальные строки в этом абзаце останутся нормальными. В этом примере показано, как использовать: элемент первой строки pseduo для реализации первой строки любого элемента HTML.
Псевдо-элемент : first-letter
В следующем примере показано, как использовать элемент :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>
Это приведет к следующему результату -
