The ::before Selector in HTML

1. CSS ::before Pseudo-Element
2. Use ::before to Add Content Before an Element in HTML

This article will introduce the CSS ::before pseudo-element and explore its application in HTML.

CSS ::before Pseudo-Element

The ::before selector is a CSS pseudo-element that we can use to insert content before a selected element or several elements. It is inline by default.

The content property often comes with the ::before selector. The property lets you add the content in the location specified by the ::before selector.

With these properties, you can add content at the location of your choice in an HTML document without making any changes to the HTML code. You can apply the CSS styles to the added content in the body of the selector.

The syntax for the ::before selector is shown below:

selector::before{
    /*Css Properties*/
}

For example, if you want to add some content before a paragraph, you should write it as follows.

p::before{
    /*Css Properties*/
}

Suppose you have written a paragraph in HTML but have missed the heading. In such conditions, you can use the ::before pseudo-element to add the heading before the paragraph.

You can write the heading using the content property and add the styles.

In the latter section, you will practically be able to use the ::before pseudo-element.

Use ::before to Add Content Before an Element in HTML

Let’s see an example of how to use ::before to add content before an element.

For example, create a container div1. Then create an ordered list using <ol> with three items inside.

Write some random items of your choice using the <li> tag.

Example Code:

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

The output is pretty much predictable. It is an ordered list containing three items.

You will now add some items before the list without changing the HTML document.

In CSS, create a selector by using the ::before pseudo-element with div1 as .div1::before. In the body of the selector, use the content property and write any arbitrary content for its value.

Let’s consider a line of asterisks as the content.

Next, let’s add something in front of each list item. You must select the li element and use the ::before pseudo-element.

Select the element as .div1 li::before and use the content property to add '\2192' as its value. The value '\2192' is the entity number for a right arrow.

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

Observe how a line of asterisks (*) is formed before the content of div1, before the list. Also, before each point of the ordered list, we inserted a right arrow.

This is how the ::before pseudo-element behaves along with the content property in CSS.