CSS: Background color to text size

Question

I'm would like to color the background of a text but only to it's size.

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

And this is what I am achieving

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

Is there anyway 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 (Solved, 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 don't really understand how clear works, but is required to achieve the results on the image.

Answer 1

You need to apply the background color to an inline element. If the text is in a block element, you need to wrap the text in an inline child of the block element (assuming it's not feasible to put display: inline on the block element). And if you can't edit the HTML, you will have to do it within a script.

Answer 2

You could wrap your text in a span like this:

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

and then, depending on you current css you could style it like this:

.highlight{
    background-color: blue; 
}