How to get highlighted text effect with CSS. How do you go about highlighting an inline part of a paragraph decorated with a “highlighted” effect as if it were marked by a real highlighter on paper. Here i will tell you today. It’s not as hard than it looks.

Highlighted-text-effect-with-CSS

How to get highlighted text effect with CSS

So in order to achieve this effect without adding spans or line breakers or divs. We will get this effect with the help of the CSS.

This works in Firefox, Chrome, Safari, and the latest version of Internet Explorer. But, it doesn’t work on older versions of Internet Explorer, mobile browsers, or on the iPad. Think of this effect as a little “nice-to-have” decorative detail. Your readers who can see it will admire your impeccable style, and your readers who can’t won’t feel left out.

First lets suppose this is the piece of text you want to be look as highlighted.

<p>Highlighting the text like this using just CSS  is harder than it looks.</p>

Then the CSS

p {
display: inline; 
background: yellow;
}

Then when you preview the browser it will give you the following look.

See the DEMO here.

Tags

  • instapaper can’t delete highlight