javascript - 在 CSS 中使用一个 before 伪选择器来在一行中显示有关多个元素的信息

Question

我正在尝试显示出现在该行本身旁边的行中的 span 元素的数据信息，我可以使用::before 伪选择器实现此目的。

但问题是，如果我想在同一行中显示有关两个单独元素的信息，它们的::before 选择器会相互重叠。即使我可以将它们分开，我想知道是否还有任何其他可靠的方法可以为 单个 上的每一行显示此类信息(一行中可能出现的许多 html 元素的数据)元素(这样当我将鼠标悬停在该元素上时，它会显示为该行收集的信息。

例如:

<p> "Neque porro quisquam est <span data-info="1">qui</span> dolorem <span data-info="2">ipsum</span> quia dolor sit amet, consectetur, adipisci velit..."</p>

假设上面的文本是单行的，我希望以某种方式在该行之前动态创建一个元素，该元素将在此行上显示数据列表(“​​信息”)，即“1”、“2” .

我想到的一种方法是将每一行包装在一个新的 html 元素中，并让该 html 元素本身收集有关其内容的信息，并仅为该元素显示::before，尽管我我什至不确定这是否可能/可行。

我也对另一种解决方案持开放态度，不必使用::before。

谢谢!

Answer 1

您是否尝试在不同的 html 元素中动态显示“data-info”数据？如果我没理解错的话，你无法使用 CSS 实现这一点。

如果“data-info”信息是静态的(您可以在::before 伪元素的内容属性中使用它吗？)那么仅使用 CSS 可能无法做到这一点。