CODEWITHSUNDEEP
htmlcssbuttoncss-selectorspseudo-element
Dan
Dan

Reputation: 10351

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

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:

enter image description here

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

Any ideas?

Upvotes: 1

Views: 3661

Answers (1)

BoltClock
BoltClock

Reputation: 724222

The :before and :after selectors refer to generated elements that exist separately from the DOM and are rendered by the browser on the fly. That means you don't use them to traverse your HTML structure.

Due to the nature of CSS selectors, you cannot select an a that contains a button, only the other way around (button contained by a). I'm afraid your only options are to use a class, or move your buttons away from your a because they semantically don't belong there.

Upvotes: 3

Related Questions