Want create site? Find Free WordPress Themes and plugins.

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.

Did you find apk for android? You can find new Free Android Games and apps.
https://i0.wp.com/den-i.com/wp-content/uploads/2015/10/text-highlighter-underline.jpg?fit=800%2C400https://i0.wp.com/den-i.com/wp-content/uploads/2015/10/text-highlighter-underline.jpg?resize=150%2C150denHow ToWeb DesignWordPressCascading Style Sheets,CSS code,CSS-Tricks,html,hyperlinks,WordPressUsing 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...Tech & Design stuff