Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating highlight effect on text with padding using CSS

Tags:

css

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?

like image 598
Andy Avatar asked May 26 '11 14:05

Andy


People also ask

How do you highlight padding in CSS?

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

How do you make a highlight effect in CSS?

How Do I Highlight Text In CSS? To Highlight text in HTML you have to use an inline element such as the <span> element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.

How do you highlight text in a different color in CSS?

The Basics. It's pretty simple. To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.

How do I add color to padding in HTML?

To add color to CSS padding, you can use the background-clip property and the box-shadow property.


2 Answers

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;
}
like image 173
Brandon Webster Avatar answered Sep 30 '22 14:09

Brandon Webster


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>
like image 26
Bit32 Avatar answered Sep 30 '22 15:09

Bit32