How to use before and after pseudo-elements?

Question

css

I kind of know how these pseudo-elements work, but in practice I don't know how to use them, please tell me how you use :before and :after ?

Answer 1

Dividers in menu items - How to make a strip between items in a horizontal menu?
Login icon - demo.smartseven.ru/BarbershopBorodinski Squares
/crosses in the sidebar in manufacturers - demo.smartseven.ru/BarbershopBorodinski/shop.html Top
right corner on products - savenkova.esy.es/barbershop/shop.html
White diamonds under headings - savenkova.esy.es/barbershop/index.html
Etc. etc. For decorative items.

Answer 2

For the most part, for design elements, all sorts of designer Wishlist, such as beaten ribbons .
Sometimes it is possible to display some information through
content: attr(attr-name)

Answer 3

Their essence is to reduce the HTML code. You can do without them altogether, for example, by making such a construction:

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

Answer 4

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

Answer 5

Mostly for decorative things on the site, I used to use them often so as not to clog the html with unnecessary tags

Answer 6

For example, for fix float

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