Sass CSS: после появления фонового изображения

Question

Я пытаюсь отобразить значок png поверх кнопки. Элемент: after находится в визуализированном html, но его размер равен 0x0, а значок не отображается. 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)
    }
  
    :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 пикселей по центру 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>