after pseudo element not appearing in code

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="x">
        <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?


solution

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