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

::before

• ::before - контент перед элементом.

Например. Изменим файл index.html:

index.html

<p class="note">Это важная заметка.</p>

Изменим файл styles.css:

styles.css

.note::before {
    content: 'Внимание! ';
    color: red;
}

::after

• ::after - контент после элемента.

Например. Изменим файл index.html:

index.html

<p class="note">Это важная заметка.</p>

Изменим файл styles.css:

styles.css

.note::after {
    content: ' Спасибо за внимание!';
    color: green;
}

::first-letter

• ::first-letter - первая буква.

Например. Изменим файл index.html:

index.html

<p>Заголовок параграфа начинается с большой буквы.</p>

Изменим файл styles.css:

styles.css

p::first-letter {
    font-size: 2em;
    color: red;
    font-weight: bold;
}

::first-line

• ::first-line - первая строка.

Например. Изменим файл index.html:

index.html

<p>
    Это текст с несколькими строками. При уменьшении ширины окна можно увидеть,
    как стилизуется только первая строка текста, а остальные - нет.
</p>

Изменим файл styles.css:

styles.css

p::first-line {
    background: #a8b1ff;
    text-transform: uppercase;
}