JSFiddle - React, Tailwind, and code Playground

by oswaldoacauan

HTML

<div id="currentpage_content">
    <a href="/">Link 1</a>
    <p> Random text <a href="/">Link 2</a> </p>
    <a href="/"><p> Random text</p></a> 
    <a href="/"><h3>h3</h3></a>
    <h3><a href="/">h3</a></h3>
</div>
<a href="/">Link Outside</a>

CSS

#currentpage_content a:link,
#currentpage_content a:visited,
#currentpage_content a:hover,
#currentpage_content a:active
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid #d4ffaa;
}

#currentpage_content a:hover,
#currentpage_content a:active {background-color: #d4ffaa;}

/* if your are trying put the <a> outside the <h3> and <p> elements */
#currentpage_content a:link p,
#currentpage_content a:visited p,
#currentpage_content a:hover p,
#currentpage_content a:active p,
#currentpage_content a:link h3,
#currentpage_content a:visited h3,
#currentpage_content a:hover h3,
#currentpage_content a:active h3
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid red;
}

#currentpage_content a:hover p,
#currentpage_content a:active p,
#currentpage_content a:hover h3,
#currentpage_content a:active h3{background-color: red;}

/* if you want apply css only for <a> inside a <p> */
#currentpage_content p a:link,
#currentpage_content p a:visited,
#currentpage_content p a:hover,
#currentpage_content p a:active
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid blue;
}

#currentpage_content p a:hover,
#currentpage_content p a:active {background-color: blue;}