CSS: Hyperlinks with Highlighter Marker Pen Effect

Using CSS, you can make text look as if it’s been underlined with a highlighter marker pen and it will look like as if it’s been highlighted when you hover your mouse pointer over the text. I found this when viewing WIRED page and doing some digging the page source on how they implemented it. I will share it with you what I know so far and you can use it on your stylesheet.

Here’s a sample of this highlighting effect (before and after):

highlighter-underline
It looks like the text is underlined with a green marker

The highlighter effects can be apply to <a></a> tag wrapped inside <p></p> or <div></div> tag.

Follow me so far? You can see the example html and css codes below:

CSS

.y-link-underline a {
    border-bottom: 1px solid #F3F315;
    box-shadow: 0 -4px 0 #F3F315 inset;
    color: inherit;
    transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1) 0s;
}
.y-link-underline a:hover, .link-underline a:focus, .link-underline a:active {
    background: none repeat scroll 0 0 #F3F315;
    color: inherit;
    text-decoration:none;
}

HTML

<p class="y-link-underline">This is an <a href="#">UNDERLINED</a>text.</p>

Live Example

1. Neon Yellow

2. Neon Green

3. Retro Orange

4. Barbie Pink

5. Blue Peeps

I added 5 texts example above with 5 different color variations. I tried to match the underline colors with the colors you usually see in a real life marker pens. I used the hex color codes at colourlovers.com.

The technical side of implementing this isn’t really difficult. If you any questions to ask regarding the post, you can ask in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Design Your Stormtrooper Helmet by Disney.Asia

Sat Oct 17 , 2015
Fancy a fully paid expenses trip for 4 to 2016 Star Wars Celebration in London? Good news for the die-hard fans out there. You can join ‘Design Your Own Stormtrooper Helmet’ online contest held by Disney Asia. Let your creative imaginations run wild by using various but limited colors, pattern […]
design your stormtrooper helmet

Related