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

Question

我正在尝试使用 Sass 实现图像中显示的样式。我使用 h1 标签和 :after 伪选择器来创建这一行。但是 :after 不起作用。我可以在 React 中实现这种风格。我在 angular-cli.

中使用 Angular7

<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: ''

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

Answer 2

您必须添加 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;
    }
}

Answer 3

content: "" 缺失。

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

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

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

Sass psuedo-selectors not working in Angular

frontend

sass

primeng

angular

angular7