如何創建一個簡單的CSS徽章系統

我需要一個簡單的徽章系統，可以應用於各種類型的html元素。如何創建一個簡單的CSS徽章系統

類似於您在手機上的消息應用程序中找到的東西。

類似這樣;

2017-09-21 Mokky Miah

稍候...您創建了一個問題，只是回答它的緣故？ – Terry

我自己找到解決方案時找不到簡單的解決方案。一旦我找出解決方案，我認爲值得分享，別人正在尋找這樣的東西。另外我希望其他人可以改進我的答案/解決方案:) –

真的嗎？那麼[這]（https://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol），[this]（https://stackoverflow.com/questions/34685233/css-badge-over-image-with-bootstrap），[this]（https://stackoverflow.com/questions/28264375/how-to-align-badge-on-top-of-icon），[this]（https://stackoverflow.com/questions/27015025/badges-for-buttons-using-html-and-css）和[this]（https://stackoverflow.com/questions/17617660/how問題在哪裏？在一個媒體的自動更低的右下角）問題？那裏有很多重複的東西。 – Terry

-2

回答我的問題了他人的利益。

最近我創建了一個使用css的徽章系統，可以應用於任何html元素。

我希望這可以幫助其他人尋找這樣的東西。

這是通過在主機元素之後應用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>

來源

2017-09-21 10:24:40

如果你使用'badge'作爲數據屬性，你不應該使用'data-badge'嗎？ –

我認爲好的做法是的，但它的工作原理與數據前綴無關。 –

是的我的意思是它只是作爲一種「最佳實踐」的東西。無論如何，解決方案非常整齊。做得好！ –

如何創建一個簡單的CSS徽章系統

回答

相關問題