Как использовать псевдоэлементы before и after?

Question

[Zadavajka]

Я вроде бы знаю как работают эти псевдоэлементы, но на практике не знаю как их использовать, скажите пожалуйста как вы используете :before и :after ?

Answer 1

[dm]

Разделители в пунктах меню - Как сделать полоску между пунктами в горизонтальном меню?
Иконка входа - demo.smartseven.ru/BarbershopBorodinski
Квадратики/крестики в сайдбаре в производителях - demo.smartseven.ru/BarbershopBorodinski/shop.html
Уголок справа вверху на товарах - savenkova.esy.es/barbershop/shop.html
Белые ромбики под заголовками - savenkova.esy.es/barbershop/index.html

И т. д. и т. п. Для декоративных элементов.

Comments

[Zadavajka]

о вот это почти то что я хотел увидить, есть ещё примеры ?

[Zadavajka]

Большое спасибо, теперь появилось больше фантазии для использования этих полезных псевдоэлементов :)

Answer 2

[Дмитрий Кравченко]

По большей части для элементов оформления, разного рода дизайнерских хотелок, как, к примеру, избитые ленты.
Иногда есть возможность вывести какую-нибудь информацию через
content: attr(attr-name)

Comments

[Капитан Какао]

Про attr не знал кстати, круто) Спасибо)

Answer 3

[Денис Инешин]

Их суть в сокращении HTML-кода. Можно вообще без них обойтись например сделав такую конструкцию:

<div class='item'>
    <div class='before'></div>
    контент
    <div class='after'></div>
</div>

Comments

[Zadavajka]

Я хотел чтоб мне привели пример где их можно использовать

Answer 4

[0leg5ergeev]

#section-1:after {
    content: ' ';
    display: block;
    width: 100%;
    height: 5px;

Answer 5

[Сергей Некрасов]

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

Answer 6

[deeppines]

Например для фикса float

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}