Is it possible to set a background color on individual words using just CSS?

Question

I'm trying to recreate this effect:

h1 span {
    background: #000;
    color: #fff;
    padding: 0 4px;
}

<h1>
    <span>This</span>
    <span>is</span>
    <span>Life</span>
</h1>

However, the project I'm working is meant to be used on a CMS, and I cannot expect my client to know how to add span tags (especially since it will require using a class on the actual site). So I'm wondering whether it is possible to recreate this effect without breaking each word into a separate element. I already know this is possible via JavaScript, and am looking specifically for CSS-only solutions.

if you can't use JS at all then consider to output the sentence from your server in this format and just add your CSS class — Raja Khoury, Feb 17 '17 at 23:05

score 1 · Answer 1 · edited Sep 28 '17 at 17:46

1

One thing that you might want to consider is nth-child, if you want to style the words in a particular order. But if you're looking to style based on the words themselves, no, you can't do that with CSS only.

edited Sep 28 '17 at 17:46

miken32

42,008
16
111
154

answered Feb 17 '17 at 23:30

Cassidy

3,328
5
39
76

score 0 · Answer 2 · edited May 23 '17 at 12:26

You can use javascript to do that for you, and add the file to your costumer's website.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};


var str = $("h1").html();
var re = /[^\s]/;
var subst = '<span>$&</span>'; 

var result = str.replaceAll(re, subst);

$("h1").html(result);

h1 span {
    background: #000;
    color: #fff;
    padding: 0 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<h1>hello there !.</h1>

ref:

adding tag by regular expression replace

replace all

Is it possible to set a background color on individual words using just CSS?

2 Answers2