CSS Links: Thick Underline and Highlight Text on Mouse Hover

CSS Links: Thick Underline and Highlight Text on Mouse Hover

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 1 min read

I noticed some websites from a few days ago that have links inside their article having thick underlines and when you mouse hover it highlights the text. I found that the CSS style is beautiful. Below is an example of this:

Links with Thick Underline and Highlight Text on Mouse Hover

The following CSS is for thick underlines for hyperlinks inside the post body. Modified the CSS class (.post-body a) according to your website elements.

.post-body a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    transition: background .15s cubic-bezier(.33,.66,.66,1);
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -3px 0 #b4e7f8;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

CSS for Highlighting Text on Mouse Hover

.post-body a:hover {
    background-color: #b4e7f8;
}

Output

This is the demo hyperlink.

See also: