after pseudo element not appearing in code

Question

I'm trying to use the after pseudo element to add some effects to a site.

<div class="product-show style-show"> <ul> <li> .... <div class="..."> <div class="readMore less">...</div> <a href="3" class="readMoreLink" onclick="return false;">Read More</a> </div> .... </li> </ul> </div>

And stylesheets:

.product-show .readMore.less { max-height: 200px; height: 100%; overflow: hidden; } .product-show .readMore.less:after { background: rgba(255, 255, 255, 0); display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; }

I see the styling for .product-show .readMore.less being applied, but I don't see a ::after notation in the HTML blocks when I'm examining the site from Chrome (latest version)/MacOS. I read that there are sometimes issues with older browsers, but I assumed that I should be able to see at least the ::after pseudo element notation if I was defining the style correctly. What am I doing wrong?

I've had the same problem. Just add content: ""; to show the element. — user3525867
– user3525867, Commented Apr 11, 2015 at 0:55
Quick note to avoid others making the same stupid mistake I have: if the outer element has overflow set to hidden, the :after pseudo element won't show... — SRack
– SRack, Commented Jun 8, 2016 at 16:29

Josh Crozier · Accepted Answer · 2015-04-11 00:49:42Z

It's because the pseudo-element isn't generated if the content value is omitted (since the initial/default value is none).

Specify a content value in order to generate the pseudo-element. A value of '' is sufficient.

.product-show .readMore.less:after { content: ''; background: rgba(255, 255, 255, 0); display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; }

I think it would worth noting that :after/:before doesn't work with <input> tag because this tag has no content. Here is link to a question. stackoverflow.com/questions/4369868/… stackoverflow.com/questions/2587669/…
Ok so I added content to my selector, but when the selector is inspected it doesn't even have content!

Saeed Zhiany · Accepted Answer · 2022-05-06 08:45:31Z

As per the MDN:

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

This means that if you don't include the content property, the :after or :before element will not be generated.

Add this line inside your pseudo (:before or :after) selector:

content: ""; // Leave this empty

And see how that affects the result.

Just as a note, you could also add text into the content property if you want to use the :before or :after to display text. In many cases though, you would find that you are simply leaving it empty.

Collectives™ on Stack Overflow

after pseudo element not appearing in code

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related