CODEWITHSUNDEEP
csssass
user15787196
user15787196

Reputation:

Add hover for an ::after pseudo element

So I have the following piece of SCSS code:

  ul {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      a {
        color: $primary;
        &:hover {
          color: $secondary;
        }
      }
      padding: 10px;
      &:hover {
        transform: translateY(-3px);
      }
    }
    &:after {
      content: '';
      display: block;
      width: 1px;
      height: 90px;
      margin: 0 auto;
      background-color: $primary;
    }
  }

The ::after adds a line on the front-end for me.

enter image description here

Is there a way that I can apply a background-color to the ::after hover effect? If I add in a hover to the <ul> element, it highlights the whole element which I don't want - I'd like to just highlight the line.

Upvotes: 1

Views: 155

Answers (1)

Lijo Chacko
Lijo Chacko

Reputation: 351

just add hover effect for ul and change the ::after background color, Check the below code, your problem will be resolved.

ul
{
&:hover
      {
        &:after
        {
          background-color:$secondary;
        }
      }
}

complete code

ul {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      a {
        color: $secondary;
        &:hover {
          color: red;
        }
      }
      padding: 10px;
      &:hover {
        transform: translateY(-3px);
      }
    }
    &:after {
      content: '';
      display: block;
      width: 1px;
      height: 90px;
      margin: 0 auto;
      background-color: $primary;
    }
  &:hover
  {
    &:after
    {
      background-color:$secondary;
    }
  }
  }

Upvotes: 1

Related Questions