我正在尝试使用after伪元素为网站添加一些效果.
<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>
Run Code Online (Sandbox Code Playgroud)
和样式表:
.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;
}
Run Code Online (Sandbox Code Playgroud)
我看到.product-show .readMore.less的样式正在应用,但是当我从Chrome(最新版本)/ MacOS检查网站时,我在HTML块中没有看到::.我读过老浏览器有时会出现问题,但我认为如果我正确定义了样式,我应该能够至少看到:: after伪元素表示法.我究竟做错了什么?