JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <div class="foo">
        hello
        <span class="bar">world</span>
    </div>
</a><br />
<a id="example2" href="#">
    <div class="foo">
        hello
        <span class="bar">world</span>
    </div>
</a><br />

CSS

a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    display:inline-block;
}

/* separate styling */

#example2:hover .bar {
    display:inline-block;
    text-decoration: line-through;
}