Button Background using :before not showing unless content property has a value

Question

I have a strange problem... I have a button, nothing special, just a button like so

<button class="btn btn--error">
    Button Text
</button>

Now I wish to have a image besides my button text, I wish to do this using CSS rather than have an img tag in the button. So I use the :before pseudo element, here is my CSS (notice it is SCSS)

.btn {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  outline: 0;
  margin-bottom: 2px;
  padding: 0 0 0 0;

  &:before {
    background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
    background-size: contain;
    content: '';
    width: 18px;
    height: 18px;
  }
 }

the location of the image is correct however in the browser I see no background image...

However when I add to the content property to the :before pseudo element like so

&:before {
    background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
    background-size: contain;
    content: '___';
    width: 18px;
    height: 18px;
  }

I can now see the background image!

How can I make it so that I can see the background image without having to put text in the content property? Any help and advice is appreciated.

does using `background-image: url("/assets/images/icons/svg/ic_add_24px.svg");` work? instead of just `background: url(...) ... ;` — Nick Parsons, Nov 30 '18 at 09:46
Using `backgroud-image` doesn't work in either scenario . I tried that previously. — Mike Sav, Nov 30 '18 at 09:48
I'm not entirely sure, but using a non-breaking space may be an option. I found this but don't know if it will work: `content: "\00a0";` — Matt, Nov 30 '18 at 09:50
That kinda works, seems like a hack and the image looks a little funny but it does show the image... — Mike Sav, Nov 30 '18 at 09:53

score 1 · Accepted Answer · answered Nov 30 '18 at 09:52

https://jsfiddle.net/4n1e8ksw/4/

Adding inline-block to pseudoelement. pseudoelement are by defualt inline and width and height for them is 0 if they have no content.

.btn {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  outline: 0;
  margin-bottom: 2px;
  padding: 30px;

  &:before {
    background: url("https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png") no-repeat top left;
    background-size: contain;
    content: '';
    width: 18px;
    height: 18px;
    display: inline-block;
  }
 }

We have a winner!!! That works! – Mike Sav Nov 30 '18 at 09:54 — Mike Sav, Nov 30 '18 at 09:54

Button Background using :before not showing unless content property has a value

1 Answers1