CSS ::before selector Last Updated : 16 Sep, 2024 Comments Improve Suggest changes Like Article Like Report The CSS ::before selector allows you to insert content before an element's actual content. It is often used to add decorative elements or symbols, enhancing the design without changing the structure of the HTML. The ::before selector is paired with the content property, which defines the inserted content. You can style the inserted content with properties like color, background, and positioning.Syntaxelement::before { content: "content"; /* additional styles */}Note: By default, the ::before content is inline, meaning it will appear alongside the element's original content unless additional styles like display: block; or position: absolute; are applied.What is the ::before Selector?The ::before selector inserts content before the actual content of a selected element. This does not affect the document flow and can be used to add text, icons, or other visual elements without altering the HTML itself. It's commonly paired with the content property, which defines the inserted content. For example, you can use it to add symbols or text before headers or paragraphsProperty ValuesPropertyDescriptioncontent: " ";Inserts blank or custom content before the element.background-color: yellow;Sets the background color of the inserted content.color: red;Changes the font color of the inserted content.font-weight: bold;Makes the inserted content bold.display: block;Changes the layout of the inserted content from inline to block.CSS ::before selector ExampleThis is an example of the ::before selector, where you can clearly see how content is inserted before the actual text of each <p> element. The inserted content is styled separately, demonstrating the flexibility and power of the ::before pseudo-element in CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>::before Selector Example</title> <style> body { text-align: center; background-color: lightgray; } /* ::before selector to add content before <p> elements */ p::before { content: "Note: "; font-weight: bold; color: blue; background-color: yellow; padding: 2px 5px; margin-right: 5px; border-radius: 3px; } /* Styling for <p> elements */ p { color: black; font-size: 18px; } /* Styling for headers */ h1 { color: white; background-color: darkblue; padding: 10px; } h2 { color: white; background-color: darkgreen; padding: 10px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>::before Selector Example</h2> <p>This paragraph shows how to use the ::before pseudo-element.</p> </body> </html> Output: Supported BrowsersGoogle Chrome 1.0Edge 12.0Firefox 1.5Safari 4.0Opera 7.0Note: Opera versions 4-6 support :before (single colon) syntax, while later versions use ::before (double colon) as per the CSS3 specification. Comment More infoAdvertise with us V Vishal_Khoda Follow Improve Article Tags : Misc Web Technologies CSS CSS-Selectors Practice Tags : Misc Similar Reads CSS [attribute*=value] Selector The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value — beginning, end, or middle.Syntax:element [attribute*="str"] { // CSS Property} Example: In the following example, the <p> 2 min read CSS [attribute=value] Selector The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value".Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.Example 1: In this example, The selector h1[id="geeks"] target 2 min read CSS [attribute$=value] Selector The [attribute$=â€valueâ€] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax:[attribute$="value"] { // CSS 2 min read CSS [attribute|=value] Selector The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-).Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.Syntax:[attributeType 2 min read CSS [attribute~=value] Selector The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected.Sy 2 min read CSS [attribute^=value] Selector The [attribute^=value] selector selects elements whose attribute value begins with a given attribute.Syntax:[attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green bac 2 min read CSS #id Selector The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.Basic ID SelectorThe ID selector allows you to sty 7 min read CSS * (Universal) Selector The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling. * { /* styles */}1. Basic Use case of universal selectorThe universal selector applies styles to all e 4 min read CSS :active Selector The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements.Syntax: :active{ //CSS pr 2 min read CSS ::after Selector ::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax:::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : HTML <!DOCTYPE html> <html> <head> <sty 2 min read Like