Text highlighting (label effect) using CSS

theorise picture theorise · Feb 4, 2011 · Viewed 9.4k times · Source

I want to create a text style similar to a label. Looky here:

enter image description here

I can nearly do it using just: http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

BUT, I want to add some padding. When I do, things go downhill. Same happens if I add a border: http://jsfiddle.net/JN72d/

Any ideas on a simple way to achieve this effect?

Answer

Stephen picture Stephen · Feb 4, 2011

I was able to achieve it by modifying your DOM structure a bit:

http://jsfiddle.net/Zp2Cm/2/