Underline Animation for Bold Text

Community Contribution: Jaee Chew

Preview Link

CSS

.underline-bold strong,
.underline-bold b {
    position: relative;
    font-weight: bold;
    color: #000;
    display: inline-block;
}

.underline-bold strong::after,
.underline-bold b::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: #0071E3;
    transition: width 0.4s ease;
}

.underline-bold strong:hover::after,
.underline-bold b:hover::after {
    width: 100%;
}

HTML

<div class="underline-bold">
  This is a <strong>hover underline</strong> effect.
</div>