CSS after

Новые свойства CSS псевдоэлементов

Начнем наше детальное знакомство со свойствами CSS 3-й версии. В алфавитном порядке первым идет так называемый псевдоэлемент after.

Какова основная задача селектора after в CSS ? → Он отображает обозначенный внутри своего же параметра content текст после объекта, в оформлении которого участвует. Давайте посмотрим конструкцию псевдоэлемента after и его параметры на конкретном примере ниже.

<title>after в css</title>

          <style type="text/css">

          p.naprimer:after {content:" - пример с селектором after"; color:#c00}

          </style>
 </head>

          <body>

          <p class="naprimer">В интернете много всего интересного!</p>

Смотрим результат:

В интернете много всего интересного!

Обратите внимание на код выше. Параграф имеет класс naprimer, который мы описали в CSS.

Продолжаем изучение новых свойств в CSS 3, на очереди псевдоэлемент before, который работает по аналогии с представленным здесь after, но наоборот.
Напомню, что в меню слева доступны подробные уроки по Каскадным таблицам стилей.

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

Псевдоэлементы: CSS after Современный CSS справочник