::before / ::after | CSS-Tricks (2024)

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

  1. Ethan Thatcher

    Permalink to comment#

    Again, what do the ‘Before’ and ‘After’ elements do?

    Reply

    • Subin Varghese

      Permalink to comment#

      Check the “More Resources” section. The first link itself is “A whole bunch of cool stuff they can do.”

    • Vin

      Permalink to comment#

      I know I’m about 3 years late..but, nonetheless –

      They just add content before or after specific elements.

      Say I want a question mark ( ? ) added after every element.

      I would style it like this:

      <style>p::after{content: "?"}</style><p>Turn down for what</p>

      Would give the following output:

      Turn down for what?

      Simple as that! ;)

      “But why bother using them?” You may ask.
      Apart from the obvious effort saving reasons, these are used to implement some cool css tricks!

      Check out the ribbon at the bottom here: http://cybernext.in

      Pure CSS my friend! The ribbon’s folded corners make use of ::before and ::after pseudo elements.

      Check this out for more : https://css-tricks.com/snippets/css/ribbon/

    • Dave

      Permalink to comment#

      I think you already knew the significance of :before & :after.

  2. Druid of Lûhn

    Permalink to comment#

    This is something that interests me (:before and :after).
    But you’ve still kept the clipped sprite from the video.

    Reply

    • Arkar Htun

      Permalink to comment#

      Hi teacher
      Can I write html tags within before and after?

  3. kevin

    Permalink to comment#

    android support?

    Reply

  4. Clark

    Permalink to comment#

    This may be a silly question, but I have some confusion over the use of 2 colons to define a pseudo element.

    i.e.,
    div:after {}

    vs.
    div::after {}

    I have seen many resources on the Internet (and articles on this site) that use a single colon, but it seems that some “newer” references use double colons. In real-world use (at least as far IE is concerned, IE8 specifically), the double colon is not compatible, but the single colon usage works in IE8 and all newer browsers (at least the ones I’ve tested). So, if a single colon works, why would I ever use double colons?

    So, can someone explain the reason behind the use of the double colons?

    Reply

    • Clark

      Permalink to comment#

      Oops… I guess I should have completely read the article above which summarizes the fact that IE8 doesn’t support double colon usage, and recommended to use single colons for now… that basically answers my question. Thanks.

    • Edis

      Permalink to comment#

      It is not that silly at all. So, in all CSS versions up to and including CSS 2.1 there was no way to differentiate what is pseudo-class and what is pseudo-element.

      I am still a beginner web developer, and although I now know a lot more than when I started, it is still sometimes confusing to properly differentiate what is pseudo-element and what is pseudo-class. The problem I believe many of us still share.

      It is so much easier to to remember that two colon (::) syntax means pseudo-element, and that one colon (:) syntax means pseudo-class. No more guess work involved.

    • Thiago Frias

      Permalink to comment#

      Is for semantic and better understand of the code, double colons is for pseudo element like ::first-line, ::-vendor-scrollbar and single colon is for pseudo class like :hover,** :active**

  5. brendan

    Permalink to comment#

    Reply

    • Don

      Permalink to comment#

      It is. Here is a CodePen showing it.

    • Edis

      Permalink to comment#

      In this particular case, no it is not an example of ::before pseudo-element. Let me explain it:

      Pseudo-element generates a virtual element as a last child element inside targeted element. In case you did not know every letter in an element is in a sort of a virtual element called line box. In this case the <div> element was empty (no text, no line box), and when the ::after pseudo-element was created his content “hi” string (generated by content property), was the only thing inside that <div> element, and that is the little illusion that is confusing you.

      For example, if you add any text in that <div> element, that “hi” string will end up as the last content in that element.

      I hope that helps to clarify things for you, at least a little bit.

    • Firoz

      Permalink to comment#

      I want to learnt after and before.
      how to learnt about the after and before ?
      please I want to solution

    • Firoz

      Permalink to comment#

      after before

  6. NicC

    Permalink to comment#

    Would anyone use :before or :after in the tag to generate a page header & footer? Is this semantically correct to apply a pseudo element to the tag?

    Example:

    html:after { content: “© 2012. All Rights Reserved.”; background-color: transparent; font-size:x-small; font-family: Arial, Helvetica, sans-serif; margin-left: 40%; text-align: center; padding-bottom: 20px;}

    Reply

    • Edis

      Permalink to comment#

      I do not think so, because content of the pseudo-element is not in the DOM (can not even be selected), therefore it only exists visually for the users of visual browsers, and that excludes screen readers and web crawlers which is not a good practice.

      The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

      The emphasis is mine. Source: MDN Docs

  7. Kyle

    Permalink to comment#

    Aren’t the HTML examples backwards for ::after and ::before?

    Reply

  8. RZK

    Permalink to comment#

    hi
    — Rest of stuff in side div —

    must be change to
    — Rest of stuff in side div —
    hi

    Reply

  9. Makis Tracend

    Permalink to comment#

    Today I used this information to create a common loading overlay for web apps:
    https://gist.github.com/tracend/8553152

    Thanks!

    Reply

  10. Lakshya

    Permalink to comment#

    That’s cool but what is the > difference between them

    Reply

  11. Jayanta Boruah

    Permalink to comment#

    Thanks for explaining the difference between : and : :

    Reply

  12. Mohammad Heydari

    Permalink to comment#

    Simple and Perfect

    Reply

  13. shishir

    Permalink to comment#

    I dont think it works in android default browzer :(..Any solution ?

    Reply

  14. Seldom

    Permalink to comment#

    Thanks for the clarification about using double-colons versus not. I’d read elsewhere not to use them, which frustrated me a bit, as I thought they were a helpful in the code visually speaking.

    I see why people were saying not to use them (for the compatibility reason with older IE-versions), but my designing-with-legacy-IE-versions-in-mind days are over, so it’s double-colons on out from here!

    Reply

    • Firoz

      Permalink to comment#

      I want to learnt after and before.
      how to learnt about the after and before ?
      please I want to solution

  15. Salman

    Permalink to comment#

    HI every one in need to give background. But the main issue is want to that the backgrond should apply from left to right and as its come to right site the hight of background should decrease as it come to right side ……… how can i apply it in CSS3

    Reply

  16. AJ Kandy

    Permalink to comment#

    Resurrecting this thread – is it possible to apply a pseudo-element to :after content? For instance, if you wanted to apply :first-letter to it in a neat CSS way, vs. having to hack it with some sort of targeted JS string parsing.

    Reply

  17. Deangelis

    Permalink to comment#

    Reply

  18. srinivas

    Permalink to comment#

    i use before tag to paragraph. i use image in that before tag. how can i fix the hight and width of that image.

    Reply

  19. Ionut Botizan

    Permalink to comment#

    You forgot the attr function which allows you to do stuff like:

    [data-tooltip]::before { content: attr(data-tooltip); /* ... */}

    Reply

  20. Randall Glass

    Permalink to comment#

    The content image can be resized.

    <!DOCTYPE html><html><head><style>.image:before {display:inline-block;content:url("MyImage.png"); -webkit-transform: scale(0.5); -moz-transform: scale(0.5);}.image {width:300px;height:300px;}</style></head><body><div class="image"></div></body></html>

    Reply

  21. Tobitron

    Permalink to comment#

    So what is the benefit of using ::after/::before vs using JQuery. I’m having trouble imagining a scenario when I wouldn’t just do this in jQuery.

    Reply

    • Simon

      Permalink to comment#

      Besides the obvious reasons that you’re using “native” implementations (giving you a better understanding of what you’re actually doing), using a CSS pseudo element is faster than using JavaScript. DOM manipulation is very expensive.

    • Tobitron

      Permalink to comment#

      Great answer, thanks!

  22. Amitoj Singh

    Permalink to comment#

    Great. Wanted to learn this “after before” thing since long but learned today only when stucked into something that needs this knowledge to proceed. Wanted to code heading decorations on two projects of mine ( lotterywale and punjabstatelottery)

    I hope I will be able to code that successfully. Will ask for help here otherwise.

    Thanks much,
    Amitoj

    Reply

  23. JJ

    Permalink to comment#

    Is it possible to use the psuedo elements within a class?

    e.g.

    .className li::before {

    }

    Thanks

    Reply

  24. Sarbjit Singh

    Permalink to comment#

    What is the use of after before element in CSS selector?

    Reply

  25. lechant

    Permalink to comment#

    Im sorry but whats the difference between inserting the css properties into the class with the after selector (.example:after{position:absolute;}) and just inserting it into the class itself (.example{position:absolute;}) , i dont quite get the concept behind this.

    Reply

    • Geoff Graham

      Permalink to comment#

      It is pretty confusing, but there is indeed a difference. Both ::before and ::after are called pseudo-elements because they elements in and of themselves that are distinct but directly related to the element they are attached to.

      I other words, .my-class::after is very much an element like .my-class and can be styled apart from it. Chris has an oldie but goodie on how they work and some interesting things you can do with them: https://css-tricks.com/pseudo-element-roundup/

  26. kalpna123

    Permalink to comment#

    it’s not working with tag

    does it work with it?

    Reply

    • Geoff Graham

      Permalink to comment#

      Yes, it does. Something like this:

      a::before {
      content: "";
      /* other properties */
      }

  27. Mehmet Yıldırım

    Permalink to comment#

    *,
    *:before,
    *:after {

    }

    what does it mean ?

    Reply

    • Chris Coyier

      Permalink to comment#

      It’s selecting the before/after pseudo-elements for ALL elements. The * means “any tag”.

  28. Carlos

    Permalink to comment#

    Where’s ::selection ?

    Reply

    • Geoff Graham

      Permalink to comment#

      ::selection

  29. BabakFP

    Permalink to comment#

    This doesn’t work

    body :not(i, [class=-icon], [class*=dashicons], ::before, ::after)
    font-family: $font-family !important

    …but this works
    body :not(i, [class=-icon], [class=dashicons]),
    body:not(
    )::before,
    body:not(*)::after
    font-family: $font-family !important

    Please add it to your article because there is no article about this issue.

    Reply

Leave a Reply

::before / ::after | CSS-Tricks (2024)

FAQs

When to use :: before and :: after? ›

In fact, MDN defines ::before as “the first child of the selected element” and ::after as “the last child of the selected element”. Because these pseudo elements appear within the selected element, they can only be used for container tags and not for empty tags.

What does :: before and :: after mean CSS? ›

:before and :after are there to allow you to add content either before or after an element from within the CSS.

Why is :: after not working? ›

If the content property is not specified, has an invalid value, or has normal or none as a value, then the ::after pseudo-element is not rendered. It behaves as if display: none is set. Note: CSS introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements.

Why before and after not working in CSS? ›

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 <img> , whose content is outside the scope of the CSS formatting model.

What is the meaning of before and after? ›

Main uses of before (earlier than) and after (later than): • As a preposition: after lunch. before dinner. After thanking them I left.

Where to use before and after CSS? ›

Like their name said it, :before & :after are used to apply css properties JUST before/after the content WITHIN the matching element. :before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s).

What is the shape of before after in CSS? ›

The before pseudo element is a circle formed using border-radius 100%. The triangle is the after element built using a CSS border trick, if you set the height, width to 0 and set the border-right, top, and bottom to transparent, you get a triangle shape.

How to use image before and after in CSS? ›

::before / ::after
  1. You want the generated content to come before the element content, positionally.
  2. 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.
Sep 30, 2022

How to use &: after in CSS? ›

The CSS ::after selector can be used to insert content after the content of the selected element or elements. It's used by attaching ::after to the element it is to be used on. In the example above, we're appending " - Buzz Lightyear" in blue to the element with the class buzz .

What is the use of :: in CSS? ›

Syntax. For example, ::first-line can be used to change the font of the first line of a paragraph. Double colons ( :: ) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use single colon ( : ) in their notation.

Why is none of my CSS working? ›

Ensure that there are no typos or syntax errors in your CSS code. A small mistake can prevent the entire stylesheet from working.

What do :: before and :: after do? ›

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.

Why is my CSS not changing anything? ›

Browser Cache

Browsers can often cache files independently of directives from the server. If you are adding/modifying in-line CSS or JavaScript and not seeing the changes reflected in the HTML source, the page is likely being cached.

What does * indicate in CSS? ›

It is a universal selector which means any style you specify within *{ } applies to every element on your page. The “*” is called the universal selector. It selects all elements. It has no specificity.

What is the use of :: selection in CSS? ›

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

What does a :: first letter mean in CSS? ›

::first-letter. The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).

What does semicolon mean in CSS? ›

In CSS, semi-colons are used to separate each rule from the next. Syntax: selector { property: value; } In this example, the 'selector' is the HTML element or class that you want to style. The property is the CSS property that you want to set, and the value is the property value.

Top Articles
Latest Posts
Article information

Author: Kieth Sipes

Last Updated:

Views: 6595

Rating: 4.7 / 5 (67 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Kieth Sipes

Birthday: 2001-04-14

Address: Suite 492 62479 Champlin Loop, South Catrice, MS 57271

Phone: +9663362133320

Job: District Sales Analyst

Hobby: Digital arts, Dance, Ghost hunting, Worldbuilding, Kayaking, Table tennis, 3D printing

Introduction: My name is Kieth Sipes, I am a zany, rich, courageous, powerful, faithful, jolly, excited person who loves writing and wants to share my knowledge and understanding with you.