::before (:before)
Quick Summary for ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Code Usage for ::before (:before)
/* Add a heart before links */ a::before {   content: "♥"; } 
More Details for ::before (:before)

::before (:before)

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

/* Add a heart before links */ a::before {   content: "♥"; } 

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

Syntax

/* CSS3 syntax */ ::before  /* CSS2 syntax */ :before

Note: CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.

Examples

Adding quotation marks

One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.

HTML
<q>Some quotes</q>, he said, <q>are better than none.</q> 
CSS
q::before {   content: "«";   color: blue; }  q::after {   content: "»";   color: red; } 
Result

Decorative example

We can style text or images in the content property almost any way we want.

HTML
<span class="ribbon">Notice where the orange box is.</span> 
CSS
.ribbon {   background-color: #5BC8F7; }  .ribbon::before {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; } 
Result

To-do list

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

HTML
<ul>   <li>Buy milk</li>   <li>Take the dog for a walk</li>   <li>Exercise</li>   <li>Write code</li>   <li>Play music</li>   <li>Relax</li> </ul> 
CSS
li {   list-style-type: none;   position: relative;   margin: 2px;   padding: 0.5em 0.5em 0.5em 2em;   background: lightgrey;   font-family: sans-serif; }  li.done {   background: #CCFF99; }  li.done::before {   content: '';   position: absolute;   border-color: #009933;   border-style: solid;   border-width: 0 0.3em 0.25em 0;   height: 1em;   top: 1.3em;   left: 0.6em;   margin-top: -1em;   transform: rotate(45deg);   width: 0.5em; } 
JavaScript
var list = document.querySelector('ul'); list.addEventListener('click', function(ev) {   if (ev.target.tagName === 'LI') {      ev.target.classList.toggle('done');   } }, false); 

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the ::before that has been styled in CSS. Go ahead and get some stuff done.

Result

Special characters

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

HTML
<ol>   <li>Crack Eggs into bowl</li>   <li>Add Milk</li>   <li>Add Flour</li>   <li aria-current='step'>Mix thoroughly into a smooth batter</li>   <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>   <li>Fry until the top of the pancake loses its gloss</li>   <li>Flip it over and fry for a couple more minutes</li>   <li>serve with your favorite topping</li> </ol> 
CSS
li {   padding:0.5em; }  li[aria-current='step'] {   font-weight:bold; }  li[aria-current='step']::after {   content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/   display: inline; } 
Result

Accessibility concerns

Using a ::before pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications

Specification
CSS Pseudo-Elements Module Level 4 # generated-content

See also

::after content Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Bajo
Random CSS Property

<frequency-percentage>

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
<frequency-percentage> css reference