Css style

How to use before and after pseudo-elements in CSS

Pseudo-elements are one of the most advanced selectors available for use in CSS. The main purpose of these selectors is to create a unique style, without altering the HTML document used to create the basic structure of a given web page.

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

Common pseudo-elements

There is a long list of pseudo-elements available to make a web developer’s life easier. Some of these pseudo-elements include:

  • Before
  • After
  • Background
  • First line
  • First letter

In specific situations, some pseudo-elements will prove to be more appropriate than others, but the only thing that remains constant is the general structure of use of any pseudo-element.

Example of pseudo-element structure


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

Although you can use an HTML element as a selector, it is recommended that you use a class or identifier to avoid targeting unwanted elements in your layout. The element, style or data that you want to insert in the desired position must be placed between the braces.

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

Using the Before pseudo-element in CSS

While not impossible, it is difficult to overlay images with readable text in CSS. This is mainly because the image and the text would occupy the same position on a web page.

VIDEO OF THE DAY MAKEUSE

It’s relatively easy to send an image as the background of a group of text, but when that image is too bright, it tends to overwhelm the text that covers it. In these cases, the next step is to try 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 to use the forward 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, 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 placed on the image and clear text displayed at the top, as shown in the image below:


Use the forward pseudo-element in css

Use the After pseudo-element in CSS

A practical use of 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 to place an asterisk after the label of that field. The after pseudo-element provides a convenient way for you to do this.

Using the After Pseudo-Element Example


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

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

Content ownership

As the pseudo-element example below shows above, the content property is the tool used to insert new content on a web page. This property is only used with before and after pseudo-elements.


It is important to note that even if there is no content available to feed the content property (as in the pseudo-element example before above), you should still use the content property in the content property. parameters before or after pseudo-element to make them work as expected.

You can now use pseudo-elements in CSS

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


css-code-in-10-minutes
10 Simple CSS Code Examples You Can Learn In 10 Minutes

Need help with CSS? Try out these basic CSS code samples to get started, then apply them to your own web pages.

Read more


About the Author