Pseudo-elements are one of the more advanced selectors that are available for use in CSS. The main purpose behind these selectors is to create unique styling, without altering the HTML document that is used to create the basic structure of a given webpage.

Here’s how to use pseudo-elements in CSS.

Common Pseudo-elements

There is an extensive list of pseudo-elements that are available to make the life of a web developer easier. Some of these pseudo-elements include:

• Before
• After
• Backdrop
• First-line
• First-letter

In specific situations, some pseudo-elements will prove to be more suitable than others, but the one thing that remains constant is the general structure for using any pseudo-element.

Pseudo-elements Structure Example

selector::pseudo-element{
/* css code */
} 

Though you can use an HTML element as a selector, it is recommended that you use a class or an id to avoid targeting unintended elements in your layout. The element, style, or data that you would like to insert at the desired position should be placed between the curly braces.

The before and after pseudo-elements are the most popular in the list, and given that there are many practical ways to use them—it’s not hard to see why.

Using the Before Pseudo-element in CSS

Though not impossible, it is difficult to overlay images with readable text in CSS. This is mostly because the image and the text would occupy the same position on a webpage.

It is relatively easy to send an image to the background of a group of text, but when that image is too bright it tends to overwhelm the text that is on top of it. In these instances, the next step is to attempt to make the image less opaque using the opacity property.

The only problem is that since the image and the text occupy the same position the text will also become somewhat transparent.

One of the few effective ways to solve this problem is by using the before pseudo-element.

Using the Before Pseudo-element Example

.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

The code above is created to be used in unison with the HTML landingPage class below. As shown in the code above, by using the before pseudo-element we can target the image and use the opacity property on it before the image is combined with the text.

   
Using the Before pseudo-element

   

      This is the result of using the before pseudo-element
      to overlay and image with readable text.
   

 

This will result in an overlay being placed on the image and clear text being displayed on top, as shown in the image below:

Using the After Pseudo-element in CSS

A practical use for the after pseudo-element is to aid in the creation of an HTML form. Most forms are created with a set of fields that require data for the form to be submitted successfully.

One way to indicate that a field in a form requires data is by placing an asterisk after the label for this field. The after pseudo-element provides a practical way for you to do this.

Using the After Pseudo-element Example

.required::after{
content: '*';
color: red;
} 

Inserting the code above into the CSS section of your form will ensure that every label that contains the required class will be directly followed by a red asterisk. The after pseudo-element is also practical in this example because it helps to separate styling from structure (which is always ideal in software development.)

The Content Property

As is shown in the after pseudo-element example above, the content property is the tool that is used to insert new content onto a webpage. This property is only used with the before and after pseudo-elements.

It is important to note that even if there is no content available to be feed to the content property (such as in the before pseudo-element example above), you are still required to use the content property within the parameters of the before or after pseudo-element to get them to work as intended.

Now You can Use Pseudo-elements in CSS

In this article, you learned how to identify and used pseudo-elements in your CSS programs. You were introduced to the before and after pseudo-elements and given practical ways to use both. You were also able to see why the content property is necessary for the successful use of the before and after pseudo-elements.

Source: makeuseof.com