隱藏僞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元素爲空

回答

相關問題