angular - Sass 伪选择器在 Angular 中不起作用

Question

我正在尝试使用 Sass 实现图像中显示的样式。我使用 h1 标签和 :after psuedo-selector 来创建这一行。但是 :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;
    }
}

请帮助我...

Answer 1

您必须添加 content:""; 属性。

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