after pseudo element not appearing in code
Solution 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;
}
Solution 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.
Ji Mun
Updated on June 02, 2022Comments
-
Ji Mun almost 2 years
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?