CSS: Background color to text size

css

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:

enter image description here

And this is what I am achieving

enter image description here

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.

Best Solution

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.