This highlighter marker effect of hyperlink is new stuff in the market. Here is How to Get WordPress Highlighter Marker Effect Hyperlink With CSS With Realistic Colors Like Faber Castell Highlighter Marker Pen. As like our other tutorials, we will use in-line CSS and span class. The basic of looking realistic is the hex value of the colors. This is an example blue underlined text. You can bring the mouse cursor over these sentences to hover to see the effect. We could use JQuery to make it semi-automatic. However, loading an extra jQuery is meaningless.
WordPress Highlighter Marker Effect Hyperlink With CSS
For the above effect, the required CSS used is :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> .link-underline a:hover, .link-underline a:focus, .link-underline a:active { background: #B4E7F8; } .link-underline a:hover, .link-underline a:focus, .link-underline a:active { background: #B4E7F8; } a:active, a:hover { color: #000000; cursor: pointer; outline: 0px none currentColor; } .link-underline a { border-bottom: 3px solid #B4E7F8; box-shadow: inset 0px -4px 0px #B4E7F8; color: inherit; transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1) 0; } a { color: inherit; text-decoration: none; transition: color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1) 0; } </style> |
Obviously, you’ll not need the style wrap if included in a CSS file. I used this HTML markup for the above example :
---
1 | <span class="link-underline"><a href="#">This is an example blue underlined text</a></span> |
Quite easy.
Other Colors in Our WordPress Highlighter Marker Effect Hyperlink With CSS Method
HEX #ccff00 also known as Fluorescent yellow or Electric lime which is composed of 80% red, 100% green and 0% blue. This is an example Fluorescent yellow or Electric lime underlined text. I have changed the class name link-underline to link-underline-yellow and CSS hex code #B4E7F8 to #ccff00.
Faber Castell’s Green’s hex value is #8cff00. Which becomes towards fluorescent yellow with time. The Pink color’s value is #ff4daf. This is an example green underlined text. Other colors usually we do not use in real. The website colorhexa.com will give to preview lot of colors, in case you want so.
It is obvious, we can use only span style for one sentence to fully highlight which are not hyperlink. As the usage of text highlighter is limited to the professionals, normal hyperlink style is usually suitable – users may not understand so much beautification of typography. These styles are good for medical, law, engineering websites targeted for their students.
