Html 伪元素和按钮标签：如何防止伪元素被点击？

我在一行文本的末尾插入了一个按钮（

标记，但呈现为链接）。我需要在按钮和文本之间做一个清晰的分隔，所以我使用了一个

：before

伪元素，并带有

内容：“-”属性来实现。到目前为止还不错

以下是一个例子：

问题在于伪元素的内容的行为与按钮本身类似：当将其悬停时，
默认值
光标变为
指针
光标，并且该元素带有下划线。这是有道理的，但我想防止这种行为，让它看起来就像一个普通的文本字符

有什么想法吗


我知道将按钮包装在一个
span
元素中，然后将
:before
属性赋予该包装器将是一个更优雅的解决方案，但在这种情况下，我负担不起。
我只会在您的情况下使用JavaScript，
insertBefore
方法应该可以很好地完成这个任务

var buttons = document.getElementsByClassName("button-rendered-as-a-link");
for (key in buttons)
  try{
   buttons[key].parentNode.insertBefore(document.createTextNode(" - "),buttons[key]);
  }catch(e){}// this may throw an error?

我只想在您的例子中使用JavaScript，
insertBefore
方法应该可以很好地完成这个任务

var buttons = document.getElementsByClassName("button-rendered-as-a-link");
for (key in buttons)
  try{
   buttons[key].parentNode.insertBefore(document.createTextNode(" - "),buttons[key]);
  }catch(e){}// this may throw an error?

看看小提琴

.button-rendered-as-a-link{
位置：相对；看看小提琴

.button-rendered-as-a-link{
position:relative；这主意不错，但我也不能用JS解决这个问题。无论如何，谢谢！这主意不错，但我也不能用JS解决这个问题。无论如何，谢谢！Hooo，这很聪明：）我不知道指针事件属性。非常感谢！Hooo，这很聪明：）我不知道指针事件属性。谢谢很多