Creating highlight effect on text with padding using CSS

Question

I am trying to create highlighted text effect with line break(s).

Example:

highlighted text effect

I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;

When adding padding it only adds padding to beginning of the text and the end, as seen here:

Added Padding

CSS:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;

Does anybody have any idea on how to make this happen?

score 24 · Accepted Answer · edited May 23 '17 at 12:17

24

I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break

The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:

.highlight {
    color:#fff;
    background:#000;
    box-shadow:5px 0 0 #000, -5px 0 0 #000;
    padding: 5px 0;
}

edited May 23 '17 at 12:17

Community

1
1

answered May 01 '13 at 05:19

Brandon Webster

356
2
2

Seeing as it's 2013 now and modern browsers support box-shadow (or box-shadow with vendor prefixing), this is the best solution listed here. – alexpls Jul 24 '13 at 11:06
Unfortunately Gmail != modern browsers and does not support box-shadow or other CSS3 specs https://www.campaignmonitor.com/css/. Is there a known solution for doing this in email? – Myk Klemme Mar 31 '16 at 19:07

Bit32 · Answer 2 · 2017-06-19T10:09:11.507

Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.

This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.

Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.

This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.

For more info see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box {
  width: 50rem;
  margin: 1rem auto;
  font-family: arial, verdana, sans-serif;
}

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 4rem; /* reduce size to remove gap between text */
  margin: 0px;
}

h1 span {
  background-color: #A8332E;
  padding: 0.5rem 0;
  -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  -webkit-box-decoration-break:clone;
  -moz-box-decoration-break:clone; 
  box-decoration-break: clone;
}

<div class="box">
  <h1>
    <span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
  </h1>
</div>

score 5 · Answer 3 · answered Aug 17 '13 at 17:46

Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}

score 4 · Answer 4 · answered Jun 08 '17 at 19:31

4

you can use box-decoration-break

-moz-box-decoration-break:clone; 
-webkit-box-decoration-break:clone;
box-decoration-break:clone;

working sample codepen

answered Jun 08 '17 at 19:31

Wolfgang Criollo

138
5

score 2 · Answer 5 · answered Feb 18 '12 at 03:42

2

Just add:

&nbsp;

If space in the text area is all you are looking for.

answered Feb 18 '12 at 03:42

Cameron

29
1

This doesn't work if the text wraps arbitrarily, e.g., in a fluid container. I suppose it could work if your line breaks are fixed, a la `
This is the first line.
This is the second line.
`. – Bungle Feb 20 '17 at 03:50

score 0 · Answer 6 · answered Jul 30 '18 at 17:59

If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.

<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
    background-color:black;
    color: white;
}
#masthead h1{
    text-transform:uppercase;
}
#container{
    background-color:red;
}
</style>
</head>
<body>
<div id="container">
  <div id="masthead">
    <h1>some sort of title goes here</h1>
  </div>
</div>
</body>
</html>

Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.

score -2 · Answer 7 · answered May 26 '11 at 14:49

-2

Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.

answered May 26 '11 at 14:49

Dmitry Negoda

2,894
2
18
15

Creating highlight effect on text with padding using CSS

7 Answers7