html - 在广告上方添加文字，但在 adblock 阻止广告时将其隐藏

Question

我想在adsense广告上方添加一个小消息，表示这是一个广告，并感谢用户没有使用adblock。显然，如果用户确实使用了 adblock，我希望将其隐藏。

我记得几年前通过简单地使用 <div class="advert"> 包装广告来做到这一点的。并将文本放入其中。似乎 adblock 不再以这种方式阻止元素，因为广告被阻止但文本仍然存在。

<div class="advert">
    Thank you for not using adblock!
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    Advertisements directly support the hosting of this site
</div>

我可以创建一个脚本来检测 adblock 并用它隐藏文本，但如果可能的话，我宁愿让 adblock 脚本进行隐藏。我主要想知道这是否可能。有什么地方可以包含文本，以便将其视为广告的一部分并因此被阻止吗？

Answer 1

那么解决方案实际上非常简单。您只需要将文本样式应用到 .adsbygoogle然后使用 ::before和 ::after显示文本的伪元素。当广告被屏蔽时 .adsbygoogle元素不存在，因此不会创建伪元素。

.adsbygoogle {
    font-size: 12px;
    text-align: center;
}
.adsbygoogle:before {
    content: 'Text above';
}
.adsbygoogle:after {
    content: 'Text below';
}

它也很简单、干净和语义化，这总是一个优点。不需要额外的标记或任何 javascript。