The use of pseudo-elements in CSS greatly enhances the ability to intelligently select specific elements on a web page and to make changes that would otherwise be impossible. The use of their combinations allows you to make quite complex changes to the page code. With their help, you can solve many problems for which you usually need either JavaScript or access to the site’s PHP code.
CSS styling pseudo-elements
The: before and: after elements in CSS belong to the so-called pseudo-elements and are used to style the specified parts of the container. For example, you can use it to style the first letter in a line or insert content before or after the contents of a particular container. They are used to add something before or after the contents of an element. The: before and: after pseudo-elements have many uses, but they serve a common purpose.
They are used to style existing HTML elements with additional text or image content. The: after and “content” pseudo-elements in CSS, which is its property, are inextricably linked, and the first does not work separately from the second. The contents of this property can be left blank by adding empty quotation marks to it: content: “”. Thus, another use case for this pseudo-element is to make it a container for some content. If the contents and property are completely removed:: after will not work.
Practical use of: before and: after in CSS
Probably the most popular use of these pseudo-elements is to add icons. In this case, they will be placed before or after some text, for example, the name of the company. Another use case is heading styling. But pseudo-elements can be used not only to create a variety of decorations on the page. Consider a very common example: a red asterisk, which is in the required field. One easy way to do this is to place it directly in the HTML markup each time. But for this you will have to write a lot of markup for one red star. Besides, what if we want to change all these stars into dots or words or repaint them in a different color? In this case, you will have to make the same change in each of the duplicates.
An example of working with a form
A slightly more elegant way to get the same result is to use the: after pseudo-element in CSS and combine it with HTML markup. To do this, you need to set a class in the field element code, and then add a pseudo-element and the desired property to it:
.some-field:after {content: " *";color: red;}
Now a red star will be in the right places. In addition, the rules for elements with the .some-field class and the: after pseudo-element: in CSS will be centralized in one place, so that you can easily change the appearance of the page, including color, size, content on the entire site at once. From this example, it becomes clear that similar logic applies to other repeating text decorations. For example, using the: before pseudo-element along with some fonts, you can change the icon of an unordered list to another.
Paste content without changing template files for a WordPress site
For WordPress sites, you can also use pseudo-elements. For example, if you want to add a delivery notification in the header on each page, but the installed theme does not allow you to add anything except the search bar and the cart. This is much easier than redoing the template. By adding the: after pseudo-element and the desired inscription to the “content” property, you can place it in a convenient place where it will look logical. The main conclusion from this is that the use of: before and: after is so wide that it allows you to position elements in different ways, making them to the right or left of the container, use margins and indents.
Opaque text on translucent background.
In CSS, it is surprisingly difficult to make an element with completely opaque text above a translucent image. You can try to set the opacity, but at the same time the text itself is blurred. The easiest option to do this is to use the: before pseudo-element correctly. With its help, the main layer becomes full-sized, absolutely positioned and with a translucent image under the main element that contains the text. This image layer can have any opacity that is necessary, but it will not affect the main layer.
Disadvantages of Using Pseudo-Classes
Using combinations of several of these elements is a powerful tool in the hands of the developer, but it is believed that it is best used as a last resort when the site’s PHP code is not available for some reason or impossible to fix. It happens so because with the help of other means everything can be done much easier. For example, you can simply add simple CSS classes where necessary. It is worth noting that the error “connection failed after 4 retries CSS” does not apply to a cascading style sheet. It occurs when there is a server problem in the game Counter-Strike: Source. The same goes for “CSS v34 connection failed after 4 retries”. Here, “CSS” refers to the name of the game.
Specific disadvantages of pseudo-elements such as: after in CSS include:
- The fragility of the style. Ability to quickly spoil the code if used improperly.
- Opacity. A large amount of code using pseudo-elements may be incomprehensible to another typesetter who starts working with the site.
- Pseudo-elements are not fully supported. Browsers are getting better and better, but it's still much safer to use simple HTML classes.
This mainly concerns projects where PHP code is out of reach and where something should work quickly.