html - 萨斯 CSS :after background image not appearing

Question

我正在尝试在按钮顶部呈现一个 png 图标。 :after 元素在呈现的 html 中，但大小为 0x0 且未显示图标。 my-button 是一个呈现按钮的通用 Web 组件

.grouped-buttons {
    button {
      margin: 0;
      border-radius: 0;
      height: 28px;	
      width: 50px;	
      border: 1px solid rgba(193,203,214,0.8);		
      background: linear-gradient(#fff, #f2f6fa)
    }
  
    :first-child button {
      border-radius: 100px 0 0 100px;
      border-right: none;

      &:after {
        content: "";
        background-repeat: no-repeat;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAL1JREFUWAntlzEOxSAMQz9fPR0H5nrtxGLJwnGHZnCXimDS6MUqMH7iM+e8RakkW2sNRfhXRF9qUuBb+pebQPXQzu96OC3eBN13e4LD9YZLpLquPcEUWG0p6ul+iN6s/vfwQzhW86fFSK46bk/Q3otPHjrNqyTbE0yBaiuZLgQZGTUegioppgtBRkaNh6BKiulCkJFR4yGokmI6+zx4uqOc5llBGE+LkUh13J6g7EG8Y1RJuPr2BFOg29q97gF+mSBWRkZEXAAAAABJRU5ErkJggg==");
        height: auto;
        width: auto;
      }
    }
   }

  <div class="grouped-buttons">
    <my-button >
      <button > </button> 
    </my-button>
    <my-button > 
      <button > </button>
    </my-button>
    <my-button > 
      <button > </button>
    </my-button>
  </div>

Answer 1

您必须设置某种宽度、高度和显示规则来告诉浏览器如何呈现元素。我使用了一个 20x20 像素的 block 元素，以 margin: 0 auto; 为中心，并使用 background-size: contain; 设置图像大小。我将您的 scss 重写为 css 并删除了 my-button 标签以使其在代码段中工作，但这些东西在您的环境中应该没问题。

.grouped-buttons button {
  margin: 0;
  border-radius: 0;
  height: 28px;
  width: 50px;
  border: 1px solid rgba(193, 203, 214, 0.8);
  background: linear-gradient(#fff, #f2f6fa)
  font-size: 0;
}

.grouped-buttons button:first-child {
  border-radius: 100px 0 0 100px;
  border-right: none;
}

.grouped-buttons button:first-child:after {
  content: "";
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAL1JREFUWAntlzEOxSAMQz9fPR0H5nrtxGLJwnGHZnCXimDS6MUqMH7iM+e8RakkW2sNRfhXRF9qUuBb+pebQPXQzu96OC3eBN13e4LD9YZLpLquPcEUWG0p6ul+iN6s/vfwQzhW86fFSK46bk/Q3otPHjrNqyTbE0yBaiuZLgQZGTUegioppgtBRkaNh6BKiulCkJFR4yGokmI6+zx4uqOc5llBGE+LkUh13J6g7EG8Y1RJuPr2BFOg29q97gF+mSBWRkZEXAAAAABJRU5ErkJggg==");
  height: 20px;
  width: 20px;
  background-size: contain;
}

<div class="grouped-buttons">
  <button> </button>
  <button> </button>
  <button> </button>
</div>