Question

我有以下徽章可以添加到任何元素：

.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;
}

它非常简单，我附加徽章类的元素提供了带有一些数字的数据徽章属性，这些属性被推入:after元素的内容。

如果content为空，我希望徽章根本不显示。我尝试使用：empty选择器，但它不起作用，因为实际标记可能仍包含其他元素，例如：

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

在这种情况下，我希望购物车图标和链接仍然存在，但让通知徽章类不会呈现徽章。

所以，我想我可以放弃它是一个纯伪元素的想法，只是让它成为一个带有数字内部的跨度而不是数据属性，但似乎有一种简单的方法要做到这一点，我只是不知道。

Answer 1

:empty选择器选择器匹配每个没有子元素的元素（包括文本节点）W3Schools

所以你能做的就是做这样的事情：

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

Answer 2

这对我有用：

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

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

数据属性为空时隐藏伪css元素

2 个答案: