Highlighter Effect with CSS

Easy guide to a pretty no-JS hover animation

Want to do something a bit fancier than just your standard underline hover effect? This post demonstrates how to create a hover animation that looks like somebody used a highlighter right on your app. Learn how to do pretty animations without any JS.

Highlighter effect on hover

I will provide the code snippets first and then walk through the most important aspects.

First step is to add a class to the links of your app that you want to give the highlighter look.

<a class="textmarker-effect" href="/about">Learn more</a>

And here is the styling:

.textmarker-effect {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
  
    &:before {
        position: absolute;
        z-index: -1;
        content: '';
        background: #fbff2b;
        height: 20px;
        left: 0;
        bottom: -10px;
        width: 0%;
        opacity: 0.7;
        transition: all 0.5s;
    }
    
    &:hover:before {
        width: 100%;
    }
}

The link has to be set to position: relative so that we can add the highlighter stroke relative to this element. The highlighter stroke itself is a pseudo element. We use before for that but you could also use after. In order to position it relative to the text element, we set its position to absolute. Remember: The parent element you want to position a child relative to cannot be positioned with the value static (the default position value). That is because a child element with position absolute is always positioned relative to its neared non-static positioned parent.

The trick now is that we want the stroke to start at the left of the link and fill out the width incrementally. For this, we define the start position on the before element with left: 0 and width: 0%.

On hover, we set the width of the before element to 100%. In order to not have an incremental highlighting motion we state transition: all 0.5s. This way, when the user hovers on the link, it will take half a second to fill the entire width. If we were to leave this part, it would just be filled suddenly on hover without any transition.

To get the highlighter look, you can use any color you like of course. Since hightlighters are commonly yellow, I chose a bright yellow and set the opacity to 70%.

You can play around with the code in this Codepen.

Here is an example how I use this effect on my own web app Flashmorize.

Thank you for reading!

Upgrade your frontend skills by creating an interactive resume builder with my beginner-friendly, hands-on Vue.js course.