在包装 <button> 元素的“<a href”上使用 :before 伪元素 - 可以吗？答案

【问题标题】：Using :before pseudo-element on '<a href' that is wrapping a <button> element - can it be done?在包装 <button> 元素的“<a href”上使用 :before 伪元素 - 可以吗？
【发布时间】：2011-02-18 00:24:39
【问题描述】：

我有兴趣看看是否可以在包裹<a href 的<button> 元素上使用:before 伪元素？

目前，Firefox 在 <button> 元素后面显示一条细蓝线 - 这是因为它被包裹在 <a href 中。

如果我在<a href 中使用内联样式，则该行将消失：

<a href="#" style="text-decoration:none;"><button>

但是，由于我在多个页面上都有 <button> 元素，因此如果可能，我想使用 CSS 来定位它们（而且我并不特别想去为所有 @ 添加一个类987654331@ 包装了网站上的<button>）。这就是我认为:before 伪元素会派上用场但它似乎不起作用的地方：

a:before button{
    text-decoration:none !important;
}

这是<button> 在 Firefox 中的显示方式，请参阅应用于<a href 的蓝色默认文本装饰。它只显示在右侧的原因是因为 margin-left:5px 类应用于 <button> 元素：

这是 jsfiddle 上按钮的基本版本（忽略轻微的外观差异）：http://jsfiddle.net/Vtjue/2/

有什么想法吗？

【问题讨论】：

"Firefox 在
抱歉，三十点，它将默认的蓝色下划线应用于显示在
<button> 首先在 <a> 中做什么？
我明白了。你能展示更多相关的 HTML/CSS 吗？可以在不诉诸:before的情况下摆脱“默认蓝色下划线”。
@thirtydot，实际上并没有那么多 css/html。按钮元素有自己的样式（字体粗细、颜色等），HTML 与一样基本，但带有

标签： html css button css-selectors pseudo-element

【解决方案1】：

:before 和:after 选择器指的是生成的元素，它们独立于 DOM 存在并由浏览器动态呈现。这意味着您不会使用它们来遍历您的 HTML 结构。

由于 CSS 选择器的性质，您不能选择包含 button 的 a，只能选择相反的方式（a 包含的button）。恐怕您唯一的选择是使用一个类，或者将您的 buttons 从您的 a 移开，因为它们在语义上不属于那里。

【讨论】：

感谢您的反馈 BoltClock。我认为您可能是对的，只是想看看是否有其他人提出 CSS 解决方案。