how I can underline a contact or text when it is clicked using HTML, CSS, and JavaScript. The underline must be equal to the width of the contact

Question

My website contacts are HOME ABOUT CONTACT ME. My website have a sticky bar at the top and contacts have in this bar, I want to underline height must be 2px. by the way, I also want to Shadow of sticky bar and background-color is gradient color. I don't know how to do it.

Answer 1

Please paste your basic code to review and comment. You can add a div element or class element to your Contacts, and style the div/class element to following code. Suppose, your contacts is an anchor tag:

<a href="#" class="contacts">Contacts</a>

CSS:

a:hover{
  text-decoration: underline;
}
    
.contacts{
  line-height:2px;
}