Html 伪元素未出现在代码中之后_Html_Css_Pseudo Element_Css Content

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

html css

Html 伪元素未出现在代码中之后,html,css,pseudo-element,css-content,Html,Css,Pseudo Element,Css Content,我试图使用after伪元素为站点添加一些效果 <div class="product-show style-show"> <ul> <li> .... <div class="..."> <div class="readMore less">...</div> <a href="3" class="readMoreLink" onclick="retu

我试图使用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的样式，但当我从Chrome（最新版本）/MacOS检查站点时，在HTML块中没有看到：：after符号。我读到旧浏览器有时会出现问题，但我认为如果我正确定义了样式，我至少应该能够看到：：after伪元素符号。我做错了什么

这是因为伪元素（因为初始/默认值是

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

这是因为伪元素（因为初始/默认值是

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：

content CSS属性与：：before和：：after一起使用伪元素生成元素中的内容

这意味着，如果不包含

内容

属性，则

：after

或

：before

元素将不会完全显示

将此行添加到代码中：

content: ""; // Leave this empty

看看这对结果有什么影响

需要注意的是，当使用

：before

或

：after

元素显示文本时，通常会将文本添加到

content

属性中。但在许多情况下，您会发现您只是将其留空。