使用：在僞元素之前'<a href' that is wrapping a <button> element - can it be done?

Question

I am interested in seeing if I can use the :before pseudo-element on a <a href wrapped around a <button> element?

Currently, Firefox shows a thin blue line behind the <button> element - this is due to it being wrapped in an <a href.

If I use an inline style within the <a href the line goes away:

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

However, since I have <button> elements on multiple pages, I want to target them using CSS if possible (and I don't particularly want to go and add a class to all the <a href that are wrapping the <button>'s on the site). This is where I was thinking the :before pseudo-element would come in handy but it doesn't seem to work:

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

This is how the <button>'s display in Firefox, see the blue default text-decoration applied to the <a href. The reason it is showing up only on the right hand side is because a class of margin-left:5px is applied to the <button> element:

Here's a basic version of the buttons up on jsfiddle (ignore slight appearance differences): http://jsfiddle.net/Vtjue/2/

任何想法？

Answer 1

:before和:after選擇器引用生成的元素，它們與DOM分開存在，並由瀏覽器在運行中呈現。這意味着你不用它們來遍歷你的HTML結構。

由於CSS選擇器的特性，你不能選擇包含button，只有周圍的其他方式（包含通過abutton）的a。恐怕您唯一的選擇是使用課程，或者將您的button從您的a中移開，因爲它們在語義上不屬於那裏。 「