Русский
Русский
English
Свойства CSS
Статистика
Реклама

Псевдоэлемент :after

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Частичная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.
Для :after характерны следующие особенности.
  • При добавлении :after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
  • При добавлении :after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  • Синтаксис
    элемент:after { content: "текст" }
    Аргументы
    Нет.
    Пример

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>after</title>
    <style type="text/css">
    p.new:after {
    content: "Новьё!"; /* Добавляемый текст */
    color: #333; /* Цвет текста */
    background-color: #fc0; /* Цвет фона */
    font-size: 90%; /* Размер шрифта */
    padding: 2px; /* Поля вокруг текста */
    }
    </style>
    </head>
    <body>
     <h2>Истории</h2>
     <p class="new">История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.</p>
     <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p>
    </body>
    </html>

    Демонстрация примера
    В данном примере в конце текстового абзаца, помеченного классом new, выводится определенный текст для привлечения внимания.
    Примечание
    Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.
    Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :after к тегу <fieldset>.
    Первоисточник - htmlbook.ru Автор - Влад Мержевич
    Комментариев (-)
    Имя
    Электронная почта

    Последние комментарии

    © 2006-2024, heroes-3.ru