css3“::after”伪元素不起作用

【问题标题】：css3 "::after" pseudo-element not workingcss3“::after”伪元素不起作用
【发布时间】：2014-10-25 06:01:51
【问题描述】：

我想在 div 标签之后添加一个三角形。因此我在伪元素之后使用了 css3。但它不起作用。以下是我的 CSS 规则。

.header-wrapper .part1 ::after {
    width: 0;
    height: 0;
    border-left: solid 48.35px #f21e1e;
    border-bottom: solid 48.35px transparent;
    border-top: solid 48.35px transparent;
}

以下是我的html部分

<div class="header-wrapper">
    <div class="part1"></div>
</div>

【问题讨论】：

标签： css css-selectors pseudo-element css-content

【解决方案1】：

为了生成伪元素，您需要specify a content value。否则，该值被假定为默认值 none - 这可能是它在您的情况下不起作用的原因。 (example)

.header-wrapper .part1::after {
    content: '';
    width: 0;
    height: 0;
    border-left: solid 48.35px #f21e1e;
    border-bottom: solid 48.35px transparent;
    border-top: solid 48.35px transparent;
}

根据您发布的 CSS，您还应该删除 .part1 ::after 之间的空格。

【讨论】：

还应注意，问题中.part1 和::after 之间的空格需要删除，因为这将是一个子选择器。