CSS: highlighted text effect

Question

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.stack.imgur.com/ak2EM.jpg

Is the idea to highlight text within a larger block of text? Your example doesn't show this but I feel that is what you are getting at. — James Montagne, Sep 11 '13 at 16:37
Yes. Perhaps this clarifies: http://jsfiddle.net/CNJZK/7/ halts the highlighting abruptly at the beginning/end of each line, when visually, this is what I'd like to happen: http://i.imgur.com/j8mIJZS.jpg — Caspid, Sep 11 '13 at 18:20
possible duplicate of [How to add horizontal padding to every line in one multi-line wrapped sentence?](http://stackoverflow.com/questions/3096916/how-to-add-horizontal-padding-to-every-line-in-one-multi-line-wrapped-sentence) — James Montagne, Sep 11 '13 at 19:23

score 5 · Answer 1 · answered Sep 11 '13 at 16:35

5

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

answered Sep 11 '13 at 16:35

j08691

204,283
31
260
272

1

Inline-block creates a rectangular block of highlight. I'm looking for something that shrinks to the text (as with inline), but extends just a little farther. Perhaps it's clearer with more text: http://jsfiddle.net/CNJZK/5/ – Caspid Sep 11 '13 at 17:32

score 3 · Answer 2 · answered Aug 06 '14 at 08:35

3

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!

answered Aug 06 '14 at 08:35

Beejay

183
1
3
13

score 1 · Answer 3 · answered Jun 09 '18 at 19:57

1

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.

answered Jun 09 '18 at 19:57

Nathan Upchurch

183
1
6

score 1 · Answer 4 · answered Jan 15 '19 at 08:24

1

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/

answered Jan 15 '19 at 08:24

Ima

11
1

Thanks! This is the only working answer to this question here. – Iguanodon Apr 08 '20 at 13:14

score 0 · Answer 5 · answered Sep 11 '13 at 16:35

0

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

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

answered Sep 11 '13 at 16:35

crush

16,713
9
59
100

A block creates a rectangle of highlight around the entire text (including things before/after the span). I'd like something that fits the text, with a bit of padding at the beginning/end of lines: http://i.imgur.com/j8mIJZS.jpg – Caspid Sep 11 '13 at 18:22
Hmmm...I can't figure out a way. Sorry. – crush Sep 11 '13 at 18:32

CSS: highlighted text effect

5 Answers5

Linked