如果原始div没有内容，我可以隐藏：before或：after元素吗？

Question

我有一个div表示＆＃34;标签：示例1，示例2＆＃34;

css看起来像这样：

.tag {
    color: #bbb9b9;
    font-size: 8pt;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

.tag:before {
    content: 'Tags: ';
}

.tag:empty {
  display:none;
}

现在，如果Wordpress帖子中没有标签显示，我也想隐藏文本＆＃34;标签＆＃34;，但它位于：before标签之前。

有没有办法以某种方式隐藏：before元素？由于：before元素实际上从未为空，因此我发现很难修复。

Answer 1

：empty伪选择器将选择不包含任何内容或仅包含HTML注释的元素。

仅当div完全为空或有注释时才会起作用。

<div></div>

<div><!-- Comment --></div>

如果div有空格或制表符，则必须使用伪元素：空白

<div> </div>
<!-- Notice that inside this div there is a blank space -->

<div>
  <!-- Comment-->
</div>

我想也许这就是可能发生的事情。虽然没有内容，但div可能有一些空格或制表。如果这没有帮助，那么当理论上空的时候有一个html代码的例子会很好。