CSS effect :hover::after on child element on :hover on parent

Question

I am struggling to get CSS hover effect on the text of a div when I hover on the div.

I want the .mark-heading tag text to get underlined via :hover::after effect when I hover on the .card-about div.

 .card-about::after { margin: auto; padding: 1px 0px; content: ''; display: block; width: 0; height: 3px; background: #000000; transition: width 0.5s; } .card-about:hover::after { margin: auto; width: 100%; transition: width 0.3s; }

 <div class="card-about"> <div class="justify-content-center d-flex"> <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140"> </div> <h4 class="mark-heading">Free Delivery</h4> <div class="about-box-content d-block">Some text here</div> </div>

Answer 1

If you want to apply the underline to the .mark-heading element instead, simply change the CSS selectors to target that element instead of .card-about :

 .mark-heading::after{ margin: auto; padding: 1px 0px; content: ''; display: block; width: 0; height: 3px; background: #000000; transition: width 0.5s; } .card-about:hover .mark-heading::after { margin: auto; width: 100%; transition: width 0.3s; }

 <div class="card-about"> <div class="justify-content-center d-flex"> <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140"> </div> <h4 class="mark-heading">Free Delivery</h4> <div class="about-box-content d-block">Some text here</div> </div>

Answer 2

I don't quite see why you need :hover::after .

Add the following lines:

.card-about:hover .mark-heading {
  text-decoration: underline;
}

This selects the .mark-heading div when .card-about is hovered.

 .card-about::after { margin: auto; padding: 1px 0px; content: ''; display: block; width: 0; height: 3px; background: #000000; transition: width 0.5s; } .card-about:hover::after { margin: auto; width: 100%; transition: width 0.3s; } .card-about:hover .mark-heading { text-decoration: underline; }

 <div class="card-about"> <div class="justify-content-center d-flex"> <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140"> </div> <h4 class="mark-heading">Free Delivery</h4> <div class="about-box-content d-block">Some text here</div> </div>