Play Text Underline Animation when hovering over div-CodePudding

I recently found an Animation for text underlines, and have trouble to shoot it when hovering over the parent, parfe div. It's not created by @Keyframes, that's why is so difficult.

I hope you guys can help me!

~ Felix

HTML File:

<div >
  <div >
    <a  id="newsTitle">News</a>
  </div>
</div>

CSS File:

.newsBox {
 padding-top: 5%;
 padding-bottom: 5%;
 background-color: rgba(154, 54, 67, 0.5);
}

.titleBox {
  margin-left: 20px;
}

  .newsTitle {
    position: relative;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
   }

  .newsTitle::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: red;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
   }

  .newsTitle:hover::before {
   visibility: visible;
   width: 100%;
  }

CodePudding user response：

It's pretty easy! Just change the last part of your code to the parent.

.newsbox:hover .newsTitle::before {
   visibility: visible;
   width: 100%;
}

So now if you hover over the .newsbox, the .newsTitle::before in there will get that new styling.

And if you want to get the effect when hovering over the .titleBox then just change it to

.titleBox:hover .newsTitle::before {
   visibility: visible;
   width: 100%;
}

CodePudding user response：

if you change The last part of the css code With the code below , you will reach your goal.

.newsBox:hover ::before {
    visibility: visible;
    width: 100%;
}

you added hover selector to the child of parent .newstitle, you must add to hover to parent .newsBox