伪元素未出现在代码中之后

after pseudo element not appearing in code

我正在尝试使用 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(最新版本)/MacOS。我读到旧版浏览器有时会出现问题,但我认为如果我正确定义了样式,我至少应该能够看到 ::after 伪元素符号。我究竟做错了什么?

因为伪元素isn't generated if the content value is omitted(因为initial/default的值是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;
}

根据 MDN:

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

这意味着如果您不包含 content 属性,将不会生成 :after:before 元素。

在伪(:before:after)选择器中添加此行:

content: "";  // Leave this empty

看看这对结果有何影响。

请注意,如果您想使用 :before:after 显示文本,您也可以将文本添加到 content 属性 中。但在许多情况下,您会发现您只是将其留空。