Open In App

CSS ::before selector

Last Updated : 04 Jul, 2023
Like Article

The ::before selector CSS pseudo-element, is used to add the same content multiple times before the content of other elements. This selector is the same as ::after selector. It helps to create the pseudo-element that represents the first child of the selected element & is generally used for adding decorative content to an element using the content property. Its default value is inline.



Example: The below HTML/CSS code shows the functionality of ::before selector.


<!DOCTYPE html>
        p::before {
            content: " - Remember this";
            background-color: blue;
    <h3>Before Selector</h3>
    <p>User ID: @dmor1</p>
    <p>Name: dharam</p>


Supported Browsers:

  • Google Chrome 1.0
  • Edge 12.0
  • Firefox 1.5
  • Safari 4.0
  • Opera 7.0

Note: Opera 4-6 supports with single-colon.(::before). 

Previous Article
Next Article

Similar Reads

CSS page-break-before Property
The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be
6 min read
How to write :hover condition for a:before and a:after in CSS?
The :before and :after selectors in CSS is used to add content before and after an element. The :hover is pseudo-class and :before &amp; :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class. Syntax: a:hover::before { // CSS Property } a:hover::after { // CSS Property } In CSS3 double colon(::) is used to denote pseudo-
2 min read
How to insert line break before an element using CSS?
The white-space property is used to insert the line break before an element. This property controls the text wrapping and white-spacing. Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Example 1: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
2 min read
How to use :before or :after pseudo-element to an input field in CSS ?
Input tag (&lt;input&gt;) in HTML is used to take input from the user like text input, button input, file input, etc. In CSS, pseudo-elements are basically specific keywords that are added to a selector to style a specific part of the selected element. For example: ::before, ::after etc. The pseudo-elements are supported by container elements, tags
3 min read
How to remove underline from a:before using CSS ?
The a:before is used to create an element before the content of the anchor tag and it displays underlined a:before part by default. To remove the underline from a:before using the text-decoration property of CSS and set element display to inline-block. Syntax: text-decoration:none; display:inline-block; Example 1: This example sets the text-decorat
2 min read
CSS break-before Property
The CSS break-before property is used to mention page break, region break, or column break should occur before the element or not. This property is ignored, if there is no generated box. Syntax: break-before: Generic break values; Or break-before: Page break values; Or break-before: Column break values; Or break-before: Region break values; Or brea
2 min read
CSS pause-before Property
The CSS pause-before property is used to define the pause time before the element. This property can be seen as the speech media equivalent to the margin-top property in visual media. Syntax: pause-before: time | percentage; Parameters: This property accepts two parameters as mentioned above and described below: time: This parameter holds a value t
1 min read
CSS cue-before Property
The CSS cue-before property is used to define an auditory icon played before the element to distinguish and set the element. Syntax: cue-before: url|none; Parameters: This property accepts two values as mentioned above and described below: url: This parameter holds an auditory icon resource. If a user is not able to render the mentioned auditory ic
1 min read
How to place background image using ::before pseudo selectors in CSS ?
Given a web page and the task is to place the background image on web page using ::before pseudo selector. The ::before pseudo selector is used to place something before the content of the selected items. Syntax: .container::before{ content: ''; background: url(image file); position:absolute; top:0px; left:0px; } Approach: The ::before pseudo selec
2 min read
Various tricks for :before pseudo elements using position property in CSS
In this article, we will learn how to use CSS position property to manipulate the position of the :before pseudo elements. The position: relative property is relative to its parent. It has left, right, top, bottom properties that help to position the coordinates of the elements. Also, we will know to manipulate the position of the :before pseudo el
5 min read