간단한 CSS 배지 시스템을 만드는 방법

Question

다양한 종류의 html 요소에 적용 할 수있는 간단한 배지 시스템이 필요합니다.

휴대 전화의 메시징 앱에서 찾은 것과 비슷한 것입니다.

이와 비슷한 것;

Answer 1

다른 사람의 이익을 위해 내 자신의 질문에 대답.

최근에 나는 html 요소에 적용 할 수있는 CSS를 사용하여 배지 시스템을 만들었습니다.

이 정보가 도움이되기를 바랍니다.

이 작업은 호스트 요소 다음에 CSS 유사 요소를 적용하여 수행됩니다. 배지는 단순히 badge 속성에 값을 추가하여 모든 요소에 적용 할 수 있습니다.

배지의 기본 위치/스타일이 적합하지 않은 경우 일부 호스트 요소가 재정의를 추가해야 할 수도 있습니다.

의사 요소의 content은 badge 특성에서 상속됩니다.

값이없는 경우 0 또는 negative 값이 지정되면 배지가 기본적으로 표시되지 않습니다. 0 또는 negative 값을 사용하여 배지를 표시해야하는 경우 CSS 무시를 사용하거나 CSS 파일에서 규칙을 제거하십시오.

오버라이드의 예;

.my-unusual-element[badge="0"]:after { 
    display: initial; 
} 

이것은 CSS 전용 솔루션이며 경량 뱃지 시스템을위한 것입니다.

여기에 데모 용 피들을 게시했습니다.

[badge]:after { 
 
     background: red; 
 
    border-radius: 30px; 
 
    color: #fff; 
 
    content: attr(badge); 
 
    font-size: 11px; 
 
    margin-top: -10px; 
 
    min-width: 20px; 
 
    padding: 2px; 
 
    position: absolute; 
 
    text-align: center; 
 
} 
 

 
[badge^="-"]:after, 
 
[badge="0"]:after, 
 
[badge=""]:after { 
 
    display: none; 
 
}

<span badge="">Empty string</span> 
 
<br> 
 
<br> 
 
<span badge="-1">-1</span> 
 
<br> 
 
<br> 
 
<span badge="0">0</span> 
 
<br> 
 
<br> 
 
<span badge="1">1</span>