Какой смысл в селекторах псевдоэлементов: before и: after в CSS?

Question

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

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

Возьмите следующий пример:

    <p>Hello</p>

    p:after {
       content: "*";
    }

Теперь, в чем преимущество использования этого по сравнению с использованием <span> тегов?

Я пропустил точку :before а :after?Есть ли какая-то веская причина использовать их поверх уже существующей семантической разметки?

Answer 1

Спецификация CSS2.1 говорит о сгенерированном контенте:

В некоторых случаях авторам может потребоваться, чтобы пользовательские агенты отображали контент, который не входит в дерево документов . Один знакомый пример этого - нумерованный список; автор не хочет перечислять числа явно, он хочет, чтобы пользовательский агент генерировал их автоматически. Точно так же авторы могут захотеть, чтобы пользовательский агент вставил слово «Рисунок» перед заголовком рисунка или «Глава 7» перед заголовком седьмой главы. В частности, для аудио или Брайля пользовательские агенты должны иметь возможность вставлять эти строки.

По сути, цель состоит в том, чтобы свести к минимуму загрязнение структуры контента «контентом», который в противном случае больше подходит в качестве элементов представления или лучше автоматизировать.

Answer 2

Если вы говорите о :before и :after: они используются в качестве элементов представления для случаев, когда добавление большего количества элементов в фактический документ будет смешивать структуру с внешним видом. Несколько случаев, которые я видел:

• Пули в маркированных списках
• Цитаты вокруг q элементов
• Стильные тени
• Декорации и начало или конец текста

Answer 3

Я думаю, :before и :after были в CSS2, но кроме педантизма, эти конкретные псевдоэлементы предназначены для добавления «контента», который на самом деле является просто визуальным пособием.

Основной пример - добавление кавычек вокруг элемента <q>, что делает Firefox, используя эти селекторы в своей таблице стилей по умолчанию. Некоторые люди также используют их для очистки поплавков.

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

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

Answer 4

Честно говоря, единственное стоящее применение - заставить элементы иметь правильный размер в домике. Используйте этот код, например:

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

Как правило, вам необходимо указать точную или минимальную высоту для .container div. если бы вы применили «: after» с каким-то очень простым CSS, любой фон, который вы применили к .container, действительно будет отображаться (почти в каждом браузере) должным образом, с небольшим количеством или без прокладок.

.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}

Теперь попробуйте этот пример, применяя цвет фона или изображение, и вы увидите, что div .container всегда имеет соответствующую высоту (которая будет общей суммарной высотой внутреннего содержимого), даже если весь внутренний html floated (как в большинстве кнопок ul / li css).

Я также использую после каждого div, где я обертываю весь свой контент на html-страницу. Это связано с тем, что весь контент на данной странице может быть перемещен, и я хочу убедиться, что у моего div содержимого всегда правильный размер / отступ с соответствующим фоном.

Answer 5

CSS3 псевдо-селекторы также включают в себя такие важные, как: ссылка,: hover,: active,: focus,: first-child,: nth-child. Без большинства из них невозможно создать полезный сайт.

Что касается менее часто используемых псевдоселекторов, таких как: after и: before, они полезны в определенных случаях, когда контент генерируется динамически, и вы хотите вставить что-то перед определенным элементом или тегом.