Существует возможность создать HTML элемент с помощью CSS. Это элементы :before и :after. Они называются называются псевдоэлементами и не могут существовать без элемента, к которому они относятся. Другими словами, если удалить тот элемент, к которому они привязаны, то псевдоэлементы тоже будут удалены.
Давайте попробуем посмотреть на практике, как же можно создать эти элементы и для чего они нужны. Приведём простейший пример — это оформление цитаты. Создадим контейнер с текстом и оформим этот блок как цитату. С помощью CSS добавим ему кавычки слева и справа, чуть изменим стиль и фон:
<style>
div {
background: #eaf2f5;
padding: 30px;
}
div:before {
content: '“';
font-size: 50px;
position: relative;
top: -30px;
left: -20px;
float: left;
}
div:after {
content: '”';
font-size: 50px;
position: relative;
top: 10px;
right: -20px;
float: right;
}
</style>
<div>Тише, мыши, кот на крыше</div>
Получится такой результат:
Тише, мыши, кот на крыше
При создании псевдоэлементов их свойства display совпадает со значением родителя.
