如何创建一个简单的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徽章系统

回答

相关问题