Question

我在一行文字的末尾插入了一个按钮（<button>标签，但是像链接一样呈现）。我需要在按钮和文本之间做一个明确的分离，所以我使用:before伪元素和content: "—";属性来实现它。到目前为止一切都很好。

问题是伪元素的内容就像按钮本身一样：当悬停它时，default光标变为pointer光标，元素加下划线。这是有道理的，但我想阻止这种行为，让它看起来就像一个普通的文本字符。

有什么想法吗？

我知道包含内部的按钮，比如一个span元素和然后将:before属性赋予该包装器将是一个更优雅的解决方案，但在这种情况下我买不起。

Answer 1

看看小提琴http://jsfiddle.net/joplomacedo/UPjQL/3/

.button-rendered-as-a-link {
    position: relative; <-------------
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #8A89BA;
    font-weight: bold;
    left: 2em; <-------------
}
.button-rendered-as-a-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button-rendered-as-a-link:before {
    content:" — ";
    position: absolute; <-------------
    right: 100%; <-------------
    padding: 0 5px;
    color: grey;
    cursor: default !important;
    pointer-events: none; <-------------
}

箭头代表我添加的内容。

我基本上使用position：absolute从流中删除了伪元素。这使得按钮的宽度等于没有psuedo元素时的宽度，因此，它的下划线等于不超过该宽度。左右属性将它们放回原位。

然后，为了不在按钮上触发悬停，我将伪元素的指针事件设置为无。您可以在https://developer.mozilla.org/en/CSS/pointer-events/了解更多相关信息。

Answer 2

我会在你的情况下使用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?

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

2 个答案: