Текст до и после тегов в css, всплывающая подсказка, before, after, content

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

Свойства before и after могут использоваться только совместно с свойством content. Часто, если content не нужен его оставляют пустым

:before - Пишет любой текст перед выбранным элементом за счет content.

К нему можно добавлять свои css свойства. Удобно, если надо задать символы, например, перед списком: content ""; Важно, чтобы в тексте поставить перевод строки, надо написать символ \A и в css свойство написать white-space: pre-line;

:after - Пишет любой текст после выбранного элемента за счет content. К нему можно добавлять свои css свойства

Ниже вы можете просмотреть примеры, а также скачать их, чтобы более подробно понять действие данных свойств.

Примеры:

Демонстрация before

Демонстрация after

Всплывающая подсказка

Подробный css код данного примера с пояснениями:

<style>
.zet:before {
content: "Перед ним ";
color: #333;background-color: #31CC00;padding: 2px;}

.zeta:after {
content: " После текста ";
color: #333;background-color: #FF84DD;padding: 2px;}

/* Работа с content*/
div:after {
content: "Текст"; /* Пишет любой текст, но работает только с атрибутами :after и :before*/

content:attr(атрибут);/* Пишет все, что содержится внутри атрибута, это может быть href, name, style, class, id*/
content:attr(href);/* Пишет адрес всех ссылок, после самих ссылок без домена */
content:attr(style);/* Пишет стиль, который задан элементу */

color: #333; background-color: #fc0; padding: 2px;
content: " Новьё!"; /* Добавляемый текст */
}

/* :Универсальная всплывающая подсказка на CSS*/
.zetb:hover:after {
content: " Вы можете позвонить нам \A по телефону, указанному в контактах ";
color: #333;background-color: #F8FFAD;padding: 2px; font-size: 12px; border-radius: 10px; z-index: 99999; padding: 3px 7px;
position: absolute; margin-top: -30px; margin-left: -30px; border: 1px solid #ccc; white-space: pre-line;}
</style>