CSS Links: Thick Underline and Highlight Text on Mouse Hover

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;


This is the demo hyperlink.

See also:

Leave a Comment