JIYIK CN >

This article will introduce CSS ::beforepseudo-elements and explore their application in HTML.

CSS ::before pseudo-element

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

The content property usually takes ::beforea selector. This property allows you ::beforeto add content at the location specified by the selector.

Using these attributes, you can add content at a selected location in the HTML document without making any changes to the HTML code. You can apply CSS styles to the content added in the body of the selector.

::beforeThe selector syntax is as follows:

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

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

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

Suppose you have written a paragraph in HTML but missed the title. In this case, you can use ::beforethe <header> pseudo-element to add the title before the paragraph.

You can write the title and add style using the content attribute.

In a later section, you'll actually be able to use ::beforethe pseudo-element.

Use ::before to add content before an element in HTML

Let's look at an ::beforeexample of how to use it to add content before an element.

For example, create a container div1. Then use <ol>to create an ordered list containing three items.

Use <li>the tag to write some random items of your choice.

Sample 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 to the front of the list without changing the HTML document.

In CSS, ::beforecreate a selector using the pseudo-element with div1 as .div1::before. In the body of the selector, use the content property and write anything you want as its value.

Let's think of a row of asterisks as content.

Next, let's add some content before each list item. You have to select the li element and use the ::before pseudo-element.

Select the element as .div1 li::beforeand use the Content attribute to add '\2192' as its value. The value '\2192' is the entity number of the right arrow.

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

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

This is ::beforehow pseudo-elements behave with the content property in CSS.