隐藏伪CSS元素为空

我有以下的徽章，我可以添加到任何元素：隐藏伪CSS元素为空

.notification-badge { 
    position: relative; 
} 

.notification-badge:after { 
    content:attr(data-badge); 
    position:absolute; 
    top:-10px; 
    right:-10px; 
    min-width: 10px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 1; 
    background-color: $brand-danger; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    border-radius: 10px; 
    border: 2px solid #fff; 
}

这是相当简单的，我附上徽章类到元素提供了一个数据，徽章属性和一些数字，这些数字会被推入到元素的内容中。

如果content为空，我想徽章根本不会出现。我使用的尝试：空选择，但它不工作，因为实际的标签可能还含有其他元素，例如：

<a href="/cart" class="notification-badge" data-badge=""> 
    <i class="fa fa-shopping-cart"></i> 
</a>

在这种情况下，我愿意购物车图标和链接仍然存在，但通知徽章课程不会呈现徽章。

所以，我想我可以放弃它是一个纯粹的伪元素的想法，只是把它作为一个范围内的数字而不是数据属性，但它似乎有可能是一个简单的方法来做到这一点，我只是不知道。

来源

2015-07-13 DVG

的:empty选择选择每一个无子女（包括文本节点）W3Schools

所以，你可以做的是在这里做这样的事情元素相匹配：

.notification-bade .fa-shopping-cart {visibility:visible} 
.notification-badge:after { 
content:attr(data-badge); visibility: hidden 
}

来源

2015-07-13 11:37:02 Lansana

这个工作对我来说：

.notification-badge:after { 
    visibility: hidden; 
} 

.notification-badge[data-badge]:after { 
    visibility: visible; 
}

来源

2016-03-10 16:47:19 dfmiller

隐藏伪CSS元素为空

回答

相关问题