How to change background color of TEXT in css
Take for example:
<div id="div1">This is a sentence.</div>
<div>
fills 100% of the line.
The text itself is just a small part of it.
I want the text to be the background color WITHOUT giving the whole line the background color.
I can change the html and add of span
course. (And use this range with background-color
)
<div id="div1"><span>This is a sentence.</span></div>
But is it possible in pure css without changing the html?
PS: I am doing css code for terminal hyper
.
SOLUTION (for all divs):
div{display:table;}
This completely ruins the behavior tmux
(internally hyper
), but maybe I'm asking too much ...
echo -e "\n\n"
also becomes a problem .: P
SOLUTION FOR THIS PROBLEM: (empty div does not take up space)
div:after{content: " ";}
source to share
you can use display:table-cell
table-cell: let element behave like element
<td>
- W3Schools
Also, if you don't want to go back to dark times, this is well supported
#div1 {
background: red;
color: white;
display: table-cell;
}
<div id="div1">This is a sentence.</div>Lorem ipsum dolor sit amet, pri cu quod audiam molestie, sit an modo probo conceptam, vim nemore quodsi no. Postea possit ne pro. Ne mel mollis oportere laboramus. Eu dico eius omnes ius. Id vis nibh adipiscing, maiorum suscipit ius eu. Sonet viris antiopam
nec in, est id equidem omnesque cotidieque, tritani detraxit qui cu.
source to share
You can use :before
to apply CSS on
#div1 {
color: blue; // hide original text
background-color: blue;
position: relative;
}
#div1:before {
content: 'This is a sentence.';
background-color: purple;
display: inline;
color: white;
position: absolute;
}
<div id="div1">This is a sentence.</div>
If you don't want the #div1
full width than just apply to it #div1 {display: inline-block}
and it will act like span
element
source to share