css - The background size of a span element

Question

I have a span element and I gave it a background-color, is there is any way to control this particular background-size?

I tried background-size: auto 2px; (2px for example) but it had no effects on it, what I want from the background color is to be a little bit smaller -height wise-, I want it to be from the top edge of the number to the bottom edge of it only, not bigger, is it possible?

button {
    background-color: rgb(41, 184, 250);
    border: 1px solid transparent;
    border-radius: 1em;
    transition: button 20ms ease;
}
span {
    background-color: white;
    background-size: auto 2px;
}

<button type="button">Unread Messages
        <span>9</span>
    </button>

Answer 1

background-size apply to only image so make your color an image using gradient:

button {
    background-color: rgb(41, 184, 250);
    border: 1px solid transparent;
    border-radius: 1em;
    transition: button 20ms ease;
}
span {
    background: linear-gradient(white,white);
    background-size: auto 10px;
    background-position:center;
    background-repeat:no-repeat;
}

<button type="button">Unread Messages
        <span>9</span>
    </button>