在 CSS 中有一个单独的伪选择器，以显示有关一行中多个元素的信息

having a single before pseudo selector in CSS to display information about multiple elements in a line

本文关键字：一行元素信息显示单独有一个 CSS 选择器更新时间：2023-09-26

我正在尝试显示出现在行本身旁边的一行中的 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>

假设上面的文本是单行，我希望以某种方式在行之前动态创建一个元素，该元素将显示此行上的数据（"info"）列表，即"1"、"2"。

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

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

谢谢！

您是否正在尝试在不同的 html 元素中动态显示"数据信息"数据？如果我理解正确，你不能用 CSS 实现这一点。

如果"data-info"信息是静态的（你能在：：before 伪元素的内容属性中使用它吗？），那么可能只能用 CSS 来做这件事。