CSS

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

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

Список доступных псевдоэлементов:

::first-letter: позволяет выбрать первую букву из текста
::first-line: стилизует первую строку текста
::before: добавляет сообщение до определенного элемента
::after: добавляет сообщение после определенного элемента
::selection: выбирает выбранные пользователем элементы

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

Псевдоэлементы first-letter и first-line:

<style>
::first-letter { color:red; font-size: 25px; }
::first-line { font-size: 20px; }
</style>


<p>Но он ничего не видал. 
Над ним не было ничего уже, кроме неба,
— высокого неба, не ясного, но все-таки 
неизмеримо высокого, с тихо ползущими по 
нем серыми облаками.</p>

Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.

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

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

Не пытайтесь засунуть язык в электрическую розетку.

Здесь псевдоэлеметы применяются к элементу с классом warning.

Псевдоэлемент selection:

<style>
p::selection {
     color: #ff0; /* Цвет текста */
     background: #000; /* Цвет фона */
 
</style>
<p>При выделении этого текста он изменит свой цвет.

текст выделить для копирования

При выделении этого текста он изменит свой цвет.