Sass psuedo-селекторы не работают в Angular

Question

Я пытаюсь добиться стиля, показанного на изображении, используя Sass.Я использовал тег h1 с :after псевдо-селектором, чтобы создать эту строку.Но :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;
    }
}

Answer 2

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>

Answer 3

добавить content: ''

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