Question

我试图使用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>

和样式表：

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

我看到.product-show .readMore.less的样式被应用了，但是当我从Chrome浏览网站时，我在HTML块中没有看到:: ::最新版本）/苹果系统。我读过老浏览器有时会出现问题，但我认为如果我正确定义了样式，我应该能够至少看到:: after伪元素表示法。我究竟做错了什么？

Answer 1

这是因为伪元素isn't generated if the content value is omitted（因为初始值/默认值为none）。

指定content值以生成伪元素。值''就足够了。

.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

根据MDN：

内容CSS属性与:: before和:: after一起使用用于在元素中生成内容的伪元素。

这意味着如果您不包含content属性，则:after或:before元素将不会完全显示。

将此行添加到您的代码中：

content: ""; // Leave this empty

看看它会如何影响结果。

就像注释一样，当content或:before元素用于显示文本时，通常会在:after属性中添加文本。但在许多情况下，你会发现你只是把它留空了。

在伪元素没有出现在代码中之后

2 个答案: