CSS: background color for text size

Question

I want to color the background of the text, but only its size.

Images are better than a thousand words, this is what I'm trying to achieve:

And this is what I achieve

I don’t want to do this programmatically, I would like the background to adapt to the text (because it can be dynamic)

Is there any way to do this without using javascript?

Update (HTML):

<div class="team-member-teaser-name">OSCAR</div> 

CSS

 .team-member-teaser-name { color: #4fb4d0; background: #135364; margin-top: 5px; margin-bottom: 5px; padding-left: 5px; font-size: 10px; } 

Update (allowed based on @BoldClock answer):

 .team-member-teaser-name { color: #4FB4D0; background: #135364; margin-top: 5px; padding-left: 5px; font-size: 10px; display: inline; float: left; padding-right: 9px; clear: both; } 

I really don’t understand how clear the work is, but it is required to achieve results in the image.

Answer 1

You need to apply the background color to the inline element. If the text is in a block element, you need to wrap the text with the built-in child element of the block element (provided that it is not practical to put display: inline in the block element). And if you cannot edit the HTML, you will have to do it in a script.

Answer 2

You can wrap your text in between as follows:

 <p><span class="highlight">OSCAR</span></p> 

and then, depending on the current css, you can create it like this:

 .highlight{ background-color: blue; } 

Answer 3

Use the background property to determine the background color. For instance,

 <a href="#">oscar</a> a{ background:#ff0000; } 

If you have inline elements, such as <span /> or <a /> , you can add display:block to the styles if you want to determine the height and width of the element. In addition, you can also define a complement to an element if you want to control the spacing around the text to give your text some room to breathe.