How to change the background color of TEXT in css

Question

Let's take for example :

<div id="div1">This is a sentence.</div>

The <div> fill up 100% of the line.

The text itself, just a little portion of that.

I want to give the text a background color WITHOUT giving the whole line a background color.

I can change the html and add a span of course. (And use this span 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'm making a css code for hyper terminal.

SOLUTION (for all div) :

div{display:table;}

This totally destroy tmux behavior (inside hyper) but maybe i'm asking for too much...

echo -e "\n\n" also becomes a problem. :p

SOLUTION FOR THIS PROBLEM : (empty div take no space)

div:after{content: " ";}

Possible duplicate of [How do I set background color of text only in CSS?](https://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css) — sol, Jun 26 '17 at 08:25
This isn't really possible in pure css, except for some rather clunky solutions. The best would be to change the markup, if you can. — Chris, Jun 26 '17 at 08:26
Your best bet is `display:table-cell` - Detailed answer below. — I haz kode, Jun 26 '17 at 08:42

score 3 · Answer 1 · answered Jun 26 '17 at 08:23

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 do not need #div1 to be full width, than simply apply #div1 {display: inline-block} to it and it will act as span element

Ugly, but probably the only solution. – Chris Jun 26 '17 at 08:27 — Chris, Jun 26 '17 at 08:27

I haz kode · Accepted Answer · 2017-06-26T08:39:30.480

1

You can use display:table-cell

table-cell: Let the element behave like a <td> element - W3Schools

Also, unless you want to go back to the dark ages, 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.

edited Jun 26 '17 at 08:39

answered Jun 26 '17 at 08:34

I haz kode

1,587
3
19
39

1

Using `inline-block` or `table-cell` in my example is just breaking `hyper`. (line breaks), But thanks to your idea, i found out that `display:table;` did the trick. ;) – bob dylan Jun 26 '17 at 08:47
@bobdylan Great! I am glad you figured that out. Thank you! – I haz kode Jun 26 '17 at 09:18

score 1 · Answer 3 · answered Jun 26 '17 at 08:37

[Block element always takes the width as 100% while inline block takes the width of the element itself. so try using inline block CSS to the element inside a div] Display:inline-block;

1 As for eg:

[https://codepen.io/nazarbecks/pen/GEMdaG][1]

Codepen link

score -3 · Answer 4 · edited Jun 26 '17 at 11:54

-3

you can set #div1 as inline-block.

#div1 {
  display: inline-block;
  background-color: color;
}

edited Jun 26 '17 at 11:54

polkovnikov.ph

6,256
6
44
79

answered Jun 26 '17 at 08:29

Mebtte

129
1
8

How to change the background color of TEXT in css

4 Answers4