251017 picogram (버튼)

      <!-- 선택자의 가상요소는 자식요소로 구현된다. -->

      <div class="user-btn-box">

        <button type="button" class="user-btn">

          <!-- before 첫째 자식-->

          퓨리얼 브랜드몰

          <!-- after 막내 자식-->

        </button>

      </div>

 

.user-btn-box {

  border: 2px solid rgba(255, 255, 255, 0.5);

  /* 동글동글 */

  border-radius: 50px;

  padding: 1px;

}

.user-btn {

  display: flex;

}

/* 가상요소 사용시 content: "" 코드 반드시 필요 */

/* 가상요소 display 기본값: inline */

.user-btn::before, .user-btn::after {

  content: "";

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}

.user-btn::before {

  background-image: url(../image/cart_w.png);

  width: 18px; height: 17px;

}

.user-btn::after {

  background-image: url(../image/ar_w.png);

  width: 8px; height: 9px;

}