CSS ::before and ::after pseudo-elements

CSS ::before and ::after are pseudo-elements that allow you to insert content before or after an element.
These pseudo-elements are often used to add visual elements to a page, such as icons or decorative elements, or to add additional styling to an element.

To use ::before or ::after, you first need to select the element that you want to insert content before or after.
This is done using a CSS selector, such as a class or ID. Then, you can use the ::before or ::after pseudo-element to insert content before or after the selected element.

Here’s an example of how to use ::before to insert an icon before an element:

.container::before {
  content: url(icon.svg);
  display: inline-block;
}

In this example, the icon.svg file will be inserted before the element with a class of .container. The display property is set to inline-block to ensure that the icon is displayed inline with the rest of the content.

To use ::after, you can use the same technique, but replace ::before with ::after. For example:

.container::after {
  content: url(icon.svg);
  display: inline-block;
}

This will insert the icon after the element with a class of .container.

::before and ::after can be used to insert any type of content, not just images. You can use them to insert text, other HTML elements, or even generated content.
They are powerful tools that can help you add visual interest and additional styling to your web pages.

One thing to note is that ::before and ::after are both considered “generated content,” which means that they are not actual elements in the HTML document. This can be helpful when you want to add content to a page without cluttering up the HTML code, but it also means that you cannot target ::before and ::after elements with JavaScript or interact with them in the same way that you can with actual HTML elements.

Examples of when to use the ::before and ::after pseudo-elements

1. Adding a decorative element to a webpage:
   You can use the ::before and ::after pseudo-elements to insert a decorative element, such as an image or a line, before or after an element in the HTML markup.
   For example, you can use the ::before pseudo-element to insert an icon before a list item, or the ::after pseudo-element to insert a line after a heading element.
   
2. Creating a two-column layout:
   You can use the ::before and ::after pseudo-elements to create a two-column layout by inserting a column divider between the two columns. For example, you can use the ::before pseudo-element to insert a vertical line between the two columns, or the ::after pseudo-element to insert a horizontal line between the two columns.
3. Adding a clearfix to a container element:
   You can use the ::before and ::after pseudo-elements to add a clearfix to a container element. A clearfix is used to prevent child elements from causing the container element to overflow. For example, you can use the ::before pseudo-element to insert a clearfix before the container element, or the ::after pseudo-element to insert a clearfix after the container element.