CODEWITHSUNDEEP
htmlcss
Quangdao Nguyen
Quangdao Nguyen

Reputation: 1373

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

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.

Upvotes: 0

Views: 1482

Answers (2)

Cassidy
Cassidy

Reputation: 3408

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.

Upvotes: 1

easa
easa

Reputation: 302

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

Upvotes: 0

Related Questions