CSS before

Свойства одного из CSS селекторов

Следующий селектор → before. Предлагаю выяснить, какими свойствами он обладает.

В чем заключается предназначение before в CSS ? → Он выводит указанный в своем же параметре content текст перед элементом интернет-страницы, к которому относится. Рассмотрим свойства before и его значения на примере внизу.

<title>before в css</title>

          <style type="text/css">

          p.vnimanie:before {content:"Внимание! "; color:#f25100}

          </style>
 </head>

          <body>

          <p class="vnimanie">Компьютер может вызывать зависимость!</p>

Результат:

Компьютер может вызывать зависимость!

CSS код: p.vnimanie:before {content:"Внимание! "; color:#f25100}

Селектор before и атрибут content со значением отображают надпись оранжевого цвета до основного содержимого, в нашем случае – это содержимое параграфа . Чтобы стало более понятно, смотрите дополнительно селектор after, который имеет противоположные before свойства.

Автор проекта - Вася Митин | Дата публикации: Январь 2013 | Обновление: Ноябрь 2018

Селекторы: CSS before CSS справочник для новичков