后伪元素不出现在代码中 [英] after pseudo element not appearing in code

问题描述

我试图使用after伪元素来添加一些效果到网站。

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>

和样式表：

.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检查网站时，我在HTML块中看不到:: after符号。我读到有时候老版本的浏览器的问题，但我认为如果我正确地定义样式，我应该能够看到至少:: after伪元素符号。我做错了什么？

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?

推荐答案

这是因为伪元素 content 值，则不会生成generate.html＃content>（因为初始值/默认值为 none ）。

It's because the pseudo-element isn't generated if the content value is omitted (since the initial/default value is none).

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

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

这篇关于后伪元素不出现在代码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！