CSS ::before Selector

CSS ::before selector allows you to insert extra content before a selected element. To add this extra content before the element we use the content property in combination with the ::before selector.

The content that we insert using the ::before selector is placed just before the element’s actual content. However, this extra content is not a part of the DOM but appears on the page as if it is.

In the following example, we are adding an extra text “Hello -” before the actual content of each paragraph. This text will appear just before the actual content of each paragraph:

Example:

p::before{
   content: 'Hello - ';
}

You can also apply CSS styles to this extra content just like a normal element.

See this example:

Example:

p::before{
   content: 'Hello - ';
   background-color: yellow;
   font-style: italic;
}

Ok, So now we have learned how we can insert some extra content before an element’s actual content.

Now let’s have a look at what all types of content we can insert before the element.

Here is the list:

  • A String – such as, “Hello world”. To insert the special characters you have to use their encoded form. For example, to insert a copyright symbol, you can use ‘\000A9’.
  • An Image – such as, url(path/to/the/image.jpg). You can also insert the gradients as they are also images.
  • A Counter – such as, counter(mycounter). This will allow you to insert a number before the element as its count.
  • A Blank String – such as, “”. This is generally used to add some decoration stuff for the element such as partial borders, box-shadows, etc.

Let’s understand each of these with the help of live examples.

The first point i.e. the string insertion not only adds the text but anything that can be copied and placed inside the “”. For example, you can add any of these ✪, ✱, ★, 💛, emojis as a string by simply copying and pasting into the content property.

In the following example, we have inserted a 💛 emoji before each paragraph.

Example:

p::before{
    content: '💛';
}

You can also insert the special characters by simply using their equivalent Unicode entity.

Here is an example where we have inserted a copyright symbol before each paragraph by simply using its Unicode equivalent:

Example:

p::before{
    content: '\000A9';
}

We can also insert images before the content of an element using the ::before selector. However, these images load in their original size and you can not resize them in the ::before selector.

Here is an example which inserts an image before the actual content of each paragraph:

Example:

p::before{
    content: url(images/star.jpg);
}

It is also possible to insert a counter before an element.

In case you don’t know, with the help of the counter-reset and counter-increment properties we can define a custom counter which will automatically increment on each occurrence of the specified element.

See this example:

Example:

body{
  counter-reset: myCounter; /* sets myCounter to 0 */
}
p::before{
  counter-increment: myCounter; /* Increments myCounter by 1 */
  content: counter(myCounter);
}

This last example is all about inserting a blank text before the element and using it to decorate the actual content of the element such as creating a partial border.

See the below div element, it has a partial red color bottom border which is made using the ::before selector.

This div element has a partial border.

And this is how we did it using the ::before selector:

Example:

p::before{
    content: '';
    position: absolute;
    border-bottom: 2px solid red;
    bottom: -3px;
    left: 0;
    width: 10%;
}

CSS Syntax

The syntax of the ::before selector is as follows:

::before{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the ::before selector.

Selector
::before4.09.03.53.17.0

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.