html - Using :before pseudo-element on '<a href' that is wrapping a <button> element - can it be done? -

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

currently, firefox shows thin blue line behind <button> element - due being wrapped in <a href.

if use inline style within <a href line goes away:

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

however, since have <button> elements on multiple pages, want target them using css if possible (and don't particularly want go , add class <a href wrapping <button>'s on site). thinking :before pseudo-element come in handy doesn't seem work:

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

this how <button>'s display in firefox, see blue default text-decoration applied <a href. reason showing on right hand side because class of margin-left:5px applied <button> element:

here's basic version of buttons on jsfiddle (ignore slight appearance differences): http://jsfiddle.net/vtjue/2/

any ideas?

the :before , :after selectors refer generated elements exist separately dom , rendered browser on fly. means don't use them traverse html structure.

due nature of css selectors, cannot select a contains button, other way around (button contained a). i'm afraid options use class, or move buttons away a because semantically don't belong there.