如果数据属性值为0或为空，则隐藏通知

Question

我有这段代码会显示通知圈：

HTML：

      <div class="icon-container">
        <span class="glyphicon glyphicon-list-alt">
            <span onclick="showDetails(this)" id="MyControl" data-counter="2"></span>
        </span>
      </div>

CSS

[data-counter]:after {
    content: attr(data-counter);
    position: absolute;
    top:-3px;
    right: -14px;
    padding: 3px 9px;
    border: 2px solid white;
    border-radius:100px;
    background: linear-gradient(top, #FF6969 0%,#ff0000 100%);
    background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);
    background: -moz-linear-gradient(top, #FF6969 0%,#ff0000 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px     rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset; 
    background-clip: padding-box;
    font:bold 12px/18px "Helvetica Neue", sans-serif; 
    color: white;
    text-decoration: no;
    z-index: 1;
    }

输出

Demo

我的问题是，如果data-counter="0"或data-counter=""

，我该如何隐藏通知圈

提前致谢

Answer 1

[data-counter="0"]:after,
[data-counter=""]:after {
    display: none;
}

我想这会成功吗？