CODEWITHSUNDEEP
angularsassfrontendprimengangular7
Praveenkumar Kalidass
Praveenkumar Kalidass

Reputation: 429

Sass psuedo-selectors not working in Angular

enter image description here

I am trying to achieve the style shown in the image using Sass. I used h1 tag with :after psuedo-selector to create this line. But :after is not working. I can achieve this style in React. I am using Angular7 with 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;
    }
}

Kindly help me...

Upvotes: 2

Views: 57

Answers (3)

Chris Tapay
Chris Tapay

Reputation: 1023

content: "" is missing.

.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>

Upvotes: 1

smtaha512
smtaha512

Reputation: 450

You have to add content:""; property.

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

Upvotes: 1

Abdul Basit
Abdul Basit

Reputation: 1382

add content: ''

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

Upvotes: 1

Related Questions