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

Последнее обновление: 21.04.2016

Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдоклассы. Список доступных псевдоэлементов:

  • ::first-letter: позволяет выбрать первую букву из текста

  • ::first-line: стилизует первую строку текста

  • ::before: добавляет сообщение до определенного элемента

  • ::after: добавляет сообщение после определенного элемента

  • ::selection: выбирает выбранные пользователем элементы

В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не поддерживают CSS3, допустимо использование одного двоеточия: :before.

Стилизуем текст, используя псевдоэлементы first-letter и first-line:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            ::first-letter { color:red; font-size: 25px; }
            ::first-line { font-size: 20px; }
        </style>
    </head>
    <body>
        <p>Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.</p>
    </body>
</html>
Псевдоэлементы в CSS3

Используем псевдоэлементы before и after:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            .warning::before{ content: "Важно! "; font-weight: bold; }
            .warning::after { content: " Будьте осторожны!"; font-weight: bold;}
        </style>
    </head>
    <body>
        <p><span class="warning">Не пытайтесь засунуть язык в электрическую розетку.</span></p>
    </body>
</html>
Псевдоэлементы before и after в CSS3

Здесь псевдоэлеметы применяются к элементу с классом warning. Оба псевдоэлемента принимают свойство content, которое хранит вставляемый текст. И также для повышения внимания псевдоэлементы используют выделение текста жирным с помощью свойства font-weight: bold;.

Используем псевдоэлемент selection для стилизации выбранных элементов:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоэлементы в CSS3</title>
        <style>
			::selection {
				color: white;
				background-color: black;
			}
        </style>
    </head>
    <body>
        <p>Пседвоэлементы в CSS3 позволяют форматировать текст.</p>
    </body>
</html>
Псевдоэлемент selection в CSS3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850