伪元素未出现在代码中之后
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
属性 中。但在许多情况下,您会发现您只是将其留空。
我正在尝试使用 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
属性 中。但在许多情况下,您会发现您只是将其留空。