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

【问题标题】：Sass psuedo-selectors not working in AngularSass 伪选择器在 Angular 中不起作用
【发布时间】：2019-07-11 10:50:02
【问题描述】：

我正在尝试使用 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;
    }
}

请帮帮我...

【问题讨论】：

标签： angular sass frontend primeng angular7

【解决方案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;
  }
}

【讨论】：

【解决方案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;
    }
}

【讨论】：

这行得通！！！但为什么是这个属性？我能够在没有 content: "" 其他地方的情况下实现这一目标......
要使before 和after 伪元素正常工作，它们必须具有定义的内容属性。

【解决方案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;
}

&lt;h1 class="login"&gt;Login&lt;/h1&gt;

【讨论】：