按钮背景使用：除非内容属性具有值，否则不显示

Question

我有一个奇怪的问题...我有一个按钮，没什么特别的，只是一个像这样的按钮

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

现在，我希望除了按钮文本之外还具有图像，我希望使用CSS来实现，而不是在按钮中具有img标签。因此，我使用了:before伪元素，这是我的CSS（注意它是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;
  }
 }

图像的位置正确，但是在浏览器中我看不到背景图像...

但是，当我像这样将content伪元素添加到:before属性中时，

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

我现在可以看到背景图像！

如何做到这一点，以便不必在content属性中放置文本就可以看到背景图像？感谢您提供任何帮助和建议。

Answer 1

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

向伪元素添加行内块。伪元素通过defualt内联，如果它们不包含内容，则它们的宽度和高度为0。

.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;
  }
 }