0

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;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Careen
  • 567
  • 1
  • 6
  • 26
  • 1
    Please include your relevant HTML and CSS. You're also misspelling the properties; they are `background-color` and `color`. – TylerH Jul 24 '14 at 15:41
  • i am in Australia, we spell it different here auto spell check : )...the html and css is not needed – Careen Jul 24 '14 at 15:43
  • 1
    You are incorrect. The HTML and CSS *is* needed according to the guidelines of the site. You also may spell the words differently, but you don't spell the properties differently. CSS is spelled the same no matter what country you're in. – TylerH Jul 24 '14 at 15:45
  • 1
    Possible duplicate: http://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css – LcSalazar Jul 24 '14 at 15:46
  • `a {display:inline-block;}` should do the trick. assuming that's the whole of the HTML. – Paulie_D Jul 24 '14 at 15:47
  • updated but I thought the question was self explanatory – Careen Jul 24 '14 at 15:48
  • have to keep as block,inline elements cant have transformations applied to them – Careen Jul 24 '14 at 15:49
  • @Paulie_D different question if you read i must keep as block , its not a duplicate – Careen Jul 24 '14 at 15:53
  • Have you tried my answer - just wrap the text in a span and apply background colour to that? – mattcouchman Jul 24 '14 at 15:54
  • yes and it was right, i chose yours... – Careen Jul 24 '14 at 16:03

2 Answers2

2

If you need to keep the link as a block, you can wrap the text in a <span> and apply the background colour to that.

mattcouchman
  • 346
  • 2
  • 7
  • Thanks it solved my issue, i wasn't sure, i was trying all display types and was contemplating on adding a dummy div you saved me a lot of time Thanks – Careen Jul 24 '14 at 16:00
1

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.

VincentVisser
  • 23
  • 5