Css 在弹出窗口中显示大部分未显示的元素

当鼠标悬停在一个基本未显示的元素上时，如何弹出该元素的内容

给定

Some text.<span class="note">Note contents.</span> Text continues.

但是这当然不起作用，因为

.note{display:none}

还隐藏了：：before子级

我可以这样做：

.note {font-size: 0}   
.note::before 
      {content: "*";
       font-size: initial}
.note:hover
      {font-size: initial}

但是这会扩展注释的内联，我需要它来覆盖注释后面继续的文本

如果我可以更改HTML，我可以在便笺前添加

*

，并触发便笺上的弹出窗口。但我无法更改源HTML

---

CSS3和SASS还可以，但我不能使用Javascript。

使用

可见性

。注意{
显示：内联块；
空白：nowrap；
宽度：5px；
可见性：隐藏；
背景：#fff；
}
.注意：之前{
能见度：可见；
内容：“*”；
}
。注意：悬停{
能见度：可见；
宽度：自动；
空白：正常；
位置：绝对位置；
}

---

一些文本。注意内容。文本继续。类似于：

有没有办法腾出空间*？这很有希望。还有两个小问题：当我悬停时，底层文本跳转了5px。不管怎样，你想阻止它吗？更重要的是，如果便笺太长而不能放在一行上，这似乎不起作用。@JPM如果便笺太长，您可以在悬停时重置空白。。对于跳跃，我会设法找到一种方法

.note {font-size: 0}   
.note::before 
      {content: "*";
       font-size: initial}
.note:hover
      {font-size: initial}