Home » CSS » CSS Style for Links - Thick Underline and Highlight Text on Mouse Hover

CSS Style for Links - Thick Underline and Highlight Text on Mouse Hover

I was noticing some websites from a few days, that they have links inside their article having thick underline 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 underline 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

See also: