CODEWITHSUNDEEP
csshighlighting
Caspid
Caspid

Reputation: 71

CSS: highlighted text effect

I'm trying to produce a highlighted text effect with a bit of padding, but the padding is only applied to the beginning and end, not new lines.

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

Please see here: http://jsfiddle.net/CNJZK/7/

Are there any pure-CSS fixes to get the internal ("sharp") edges to extend a bit farther? i.e. like in this image: https://i.sstatic.net/ak2EM.jpg

Upvotes: 5

Views: 46341

Answers (5)

Ima
Ima

Reputation: 21

Solution is this CSS:

-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;

https://css-tricks.com/almanac/properties/b/box-decoration-break/

Upvotes: 2

Nathan Upchurch
Nathan Upchurch

Reputation: 203

In case anyone is still looking for an answer:

p {
    box-shadow: 0px 0px 0px 5px yellow;
    display: inline;
    line-height: 2;
    margin: -5px -5px;
    background-color: yellow;
    border-radius: 1px;
}

See jsfiddle here.

Upvotes: 2

Beejay
Beejay

Reputation: 303

If you're not limited to a specific HTML standard, you could take a look at the <mark> tag, which was introduced with HTML5. This site gives you a quick overlook.

Hope it helps!

Upvotes: 3

j08691
j08691

Reputation: 208002

Try setting the display on your span to inline-block:

#highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

jsFiddle example

Upvotes: 5

crush
crush

Reputation: 17033

You need to set the display to inline-block or block.

#highlight {
    display: inline-block;
    /* ... */
}

Upvotes: 0

Related Questions