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. — , Apr 11 '15 at 00: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, Jun 08 '16 at 16:29

score 29 · Accepted Answer · answered Apr 11 '15 at 00:49

29

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;
}

answered Apr 11 '15 at 00:49

Josh Crozier

233,099
56
391
304

2

I think it would worth noting that :after/:before doesn't work with tag because this tag has no content. Here is link to a question. https://stackoverflow.com/questions/4369868/css3-after-pseudo-element-with-input https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field – Ajeet Singh Mar 29 '21 at 20:56
Ok so I added `content` to my selector, but when the selector is inspected it doesn't even have `content`! – Michael Sep 01 '22 at 02:26

score 9 · Answer 2 · edited May 06 '22 at 08:45

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.

after pseudo element not appearing in code

2 Answers2

Linked

Related