如何在firefox上使用css使伪元素可见和可点击

Question

我有一个按钮，后跟一个伪元素。按钮显示“下一步”，伪元素显示“>”。这用于分页。

我隐藏了按钮，但使用 css 属性使伪元素可见

button{
    visibility: hidden;
}
button::pseudoElement{
    visibility: visible;
}

现在按钮是隐藏的，元素是可见的。它也是可点击的。它适用于 chrome、safari 和 ie。但它不会点击Firefox。我要改变什么？

编辑 这个黑客成功了

  button{
        color: transparent;
    }
    button::pseudoElement{
        color: black;
    }

有更好的方法吗？

Answer 1

伪元素实际上并没有插入到元素本身之前或之后。它们作为第一个/最后一个 child 元素插入。所以如果你隐藏“父”元素，它们的::before/::after伪元素也会被隐藏。

在你的情况下，我会在父元素上使用旧的 text-indent: -9999px 或 font-size: 0 技巧并重置伪元素 (text-indent: 0)。

使用您的color: transparent 解决方案，元素将保持其大小。使用text-indent 技巧，它只是使用伪元素所需的空间。