Change the height of the background color of the span
Is it possible to edit the height of the background color in my range?
Html
<span class="highlight">Some highlighted text</span>
CSS
.highlight{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
What I want to do is allocate 1.8em. I'm not sure how to implement this, if it's not too tedious (i.e. a lot of divs).
source to share
You can use a vertical linear gradient with transparent top and bottom colors (I used red in the example).
The height of the element 2em
due line-height
, therefore 1.8em
is 90%. Create a gradient with two transparent stripes (red in the demo) 5% each. The remaining 90% will be the highlight color.
.highlight {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);
line-height: 2em;
}
<span class="highlight">Some highlighted text</span>
source to share
By setting the display property to the inline block, the background size will be equal to the line height without adding a div. Hope this works for you!
.highlight{
display:inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
source to share
If anyone is looking for an answer on how to expand the background color of the text of elements <span>
to be higher than the text itself, but would like it to <span>
be inline, then none of these other solutions will work since the background color is independent from line-height
or height
range. This is influenced only by font-size
and padding
. Here is the correct solution for this case:
body {
font-size: 1em;
line-height: 1.5em;
}
.highlight {
background: yellow;
padding: 0.25em 0; /* Half the line-height minus the font-size */
}
.highlight.no-padding { padding: initial; }
<p style="width:400px">
Here is a bunch of text that will have some highlighted text within it.
<span class="highlight">
Here is some highlighted text that will span multiple lines and will have a full height background color.
</span>
Here is also some highlight text without the padding.
<span class="highlight no-padding">
Here is some highlighted text without a full height background, regardless of having the same 'line-height'
</span>
</p>
source to share