Angular Sass psuedo选择器在角度模式下不工作

我正在尝试使用Sass实现图像中显示的样式。我使用

h1

标记和

：after

psuedo选择器来创建这一行。但是

：after

不起作用。我可以在React中实现这种风格。我将Angular7与

angular cli一起使用

<h1 class="login">Login</h1>

.login {
    margin-top: 0;
    position: relative;
    &:after {
        display: block;
        border-bottom: 4px solid #faaf4a;
        bottom: 0;
        left: 0;
        position: absolute;
        width: 40px;
    }
}

登录
.登录{
边际上限：0；
位置：相对位置；
&：之后{
显示：块；
边框底部：4px实心#faaf4a；
底部：0；
左：0；
位置：绝对位置；
宽度：40px；
}
}

请帮助我…

添加

内容：'

---

您必须添加

内容：“”属性

<h1 class="login">Login</h1>

.login {
    margin-top: 0;
    position: relative;
    &:after {
        content: "";
        display: block;
        border-bottom: 4px solid #faaf4a;
        bottom: 0;
        left: 0;
        position: absolute;
        width: 40px;
    }
}

登录
.登录{
边际上限：0；
位置：相对位置；
&：之后{
内容：“；
显示：块；
边框底部：4px实心#faaf4a；
底部：0；
左：0；
位置：绝对位置；
宽度：40px；
}
}
内容：“
缺失


。登录{
边际上限：0；
位置：相对位置；
}
.登录：之后{
内容：“；
显示：块；
边框底部：4px实心#faaf4a；
底部：0；
左：0；
位置：绝对位置；
宽度：40px；
}
登录
这很有效！！！但为什么会有这样的财产？我能够在没有
内容的情况下实现这一点：“
其他地方…要使
之前的
和
之后的
伪元素正常工作，它们必须具有定义的内容属性。
<h1 class="login">Login</h1>

.login {
    margin-top: 0;
    position: relative;
    &:after {
        content: "";
        display: block;
        border-bottom: 4px solid #faaf4a;
        bottom: 0;
        left: 0;
        position: absolute;
        width: 40px;
    }
}