Getting background-color of display block to fill only behind text

Question

I ran into a situation where I have a link that is set as a display:block . I'm trying to fill the background-color property with a color, but only behind the text; instead, it's filling the entire background of that row, which is logical, but not what I want. How can I fill only the background of the text without being an inline element? Or is this not possible?

HTML:

<a href ="#">mylink</a>

CSS:

a {
    display:block;
    background-color:blue;
}

Answer 1

如果需要将链接保留为一个块，则可以将文本包装在<span>并为其应用背景色。

Answer 2

Simple code would be something like this:

<a href="#" style="display: block">
 Hello<span style="background: blue; color: white">blue</span>link
</a>

You can then add padding and other style to the span tag. You can add a ID tag to the span if its a special once off thing for specific styling.