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

Оцените материал
(0 голосов)

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

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

Просмотреть  пример

Используем псевдоэлементы 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>

Просмотреть  пример

Здесь псевдоэлеметы применяются к элементу с классом 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>

Просмотреть  пример

Прочитано 625 раз Последнее изменение Пятница, 03 февраля 2017 16:58
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+