단거 - content: attr(data-xxx)

 

CSS 속성과 함께 제공되는 attr() 함수를 이용해 데이터 처리하기입니다.

* data 속성은 접근성 이슈가 있으니 상황에 따른 선택 사용이 필요.


HTML

<button type="button" data-num="12">
  <span>뱃지 버튼<span>
</button>

태그 내 data-num 이란 커스텀 속성을 사용

CSS

.btn-badge {
  position: relative;
  padding: 6px 10px;
  line-height: 1;
  border: 0;
  outline: 0;
  background: #000;
  color: white;
  &::after {
    position: absolute;
    content: attr(data-num);
    top: -1rem;
    right: -1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.2rem;
    background: red;
    color: white;
  }
}

 

fin.