③ Добавление текста и изображения

Продолжим изучение темы CSS - контент. Если пропустили прошлые статьи, то вот ссылки на них:

① Свойство content
② Добавление специального символа

📷 Добавление текста

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

CSS

h1:before, h1:after {
content: "Yay!";
font-family: 'Dancing Script', cursive;
color: #f7b21c;
text-shadow: 1px 1px 2px grey; 
}
h1:before {
margin-right: 30px;
}
h1:after {
margin-left: 30px;
}

📷 Добавление изображения

CSS

h1:before { 
content: url(https://html5book.ru/images/left-twig.png); 
display: inline-block;
margin-right: 10px; 
}

Продолжение в следующей статье!