[How to] add decorative content through CSS using pseudo-elements

The :before and :after pseudo-elements allow you to add content to an element, without actually adding any HTML markup to the document. This can be useful for adding decorative elements, such as icons or borders, to an element without having to add additional HTML elements.

Here is an example of how you can use the :before and :after pseudo-elements to add content to an element:

.my-element:before {
  content: '\f00c'; /* Add a font awesome icon */
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  color: #00b8d4;
}

.my-element:after {
  content: ''; /* Add a border */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #00b8d4;
}

In this example, the :before pseudo-element is used to add a font awesome icon to the .my-element element, and the :after pseudo-element is used to add a border around the element. The content property is used to specify the content that will be added by the pseudo-elements, and the other CSS properties are used to position and style the added content.

By using the :before and :after pseudo-elements, you can easily add content to an element without having to add additional HTML markup, and you can control the position and style of the added content using CSS.