after pseudo element not appearing in code [duplicate]

Answer 1

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

Answer 2

As per the MDN:

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

What this means is that if you don't include the content property, the :after or :before element won't show altogether.

Add this line into your code:

content: ""; // Leave this empty

And see how that affects the result.

Just as a note, you would normally add text into the content property when the :before or :after element is used to display text. In many cases though, you would find that you are simply leaving it empty.