All elements before css

::before / ::after

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

• You want the generated content to come before the element content, positionally.
• The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

Note that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it’s really before or after the other content inside.

The value for content can be:

• A string: content: «a string»; — special characters need to be specially encoded as a unicode entity. See the glyphs page.
• An image: content: url(/path/to/image.jpg); — The image is inserted at it’s exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
• Nothing: content: «»; — Useful for clearfixes and inserting images as a background-image (set width and height , and can even resize with background-size ).
• A counter: content: counter(li); — Really useful for styling lists (but we also have ::marker for that).
• A line break: content: «Killing \A Me \A Softly»; — Great for when you really need one.

Note that you can insert HTML entities in the content property, but no dice as far as them rendering or anything like that.

content: "
I will not render as a Heading 1
";

Every browser that supports the double colon ( :: ) CSS3 syntax also supports just the ( : ) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support.

:: is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Tricks that use ::before and after

Источник

::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.

Try it

Note: The pseudo-elements generated by ::before and ::after are boxes generated as if they were immediate children of the element on which they are applied, or the «originating element,» and thus can not apply to replaced elements, such as , whose content is outside the scope of the CSS formatting model.

Syntax

Note: Selectors Level 3 introduced the double-colon notation ::before to distinguish pseudo-classes from pseudo-elements. Browsers also accept single-colon notation :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 quotesq>, 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 milkli> li>Take the dog for a walkli> li>Exerciseli> li>Write codeli> li>Play musicli> li>Relaxli> 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

const list = document.querySelector("ul"); list.addEventListener( "click", (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 bowlli> li>Add Milkli> li>Add Flourli> li aria-current="step">Mix thoroughly into a smooth batterli> li>Pour a ladleful of batter onto a hot, greased, flat frying panli> li>Fry until the top of the pancake loses its glossli> li>Flip it over and fry for a couple more minutesli> li>serve with your favorite toppingli> 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

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS ::before Selector

Insert some text before the content of each

element:

More «Try it Yourself» examples below.

Definition and Usage

The ::before selector inserts something before the content of each selected element(s).

Use the content property to specify the content to insert.

Use the ::after selector to insert something after the content.

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

CSS Syntax

More Examples

Example

Insert content before every

element’s content, and style the inserted content:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник