Использование: before псевдоэлемента в '<a href', который оборачивает элемент <button>- это можно сделать? - PullRequest
Новая
       44

Использование: before псевдоэлемента в '<a href', который оборачивает элемент <button>- это можно сделать?

2 голосов
/ 18 февраля 2011

Мне интересно узнать, могу ли я использовать псевдоэлемент :before на <a href, обернутом вокруг элемента <button>?

В настоящее время Firefox показывает тонкую синюю линию за элементом <button> - это связано с тем, что он заключен в <a href.

Если я использую встроенный стиль в <a href, строка исчезает: 

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

Однако, поскольку у меня есть элементы <button> на нескольких страницах, я хочу нацелить их, используя CSS , если это возможно (и я не особенно хочу идти и добавлять класс ко всем <a href которые обертывают <button> на сайте). Вот где я думал, что псевдоэлемент :before пригодится, но, похоже, он не работает: 

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

Так выглядит <button> в Firefox, см. Синий текстовый декор по умолчанию, примененный к <a href. Причина, по которой он отображается только с правой стороны, заключается в том, что класс margin-left:5px применяется к элементу <button>:

enter image description here

Вот базовая версия кнопок на jsfiddle (игнорируйте небольшие различия во внешнем виде): http://jsfiddle.net/Vtjue/2/

Есть идеи?

1 Ответ

3 голосов
/ 18 февраля 2011

Селекторы :before и :after относятся к сгенерированным элементам, которые существуют отдельно от DOM и визуализируются браузером на лету. Это означает, что вы не используете их для обхода вашей HTML-структуры.

Из-за природы селекторов CSS вы не можете выбрать a, который содержит button, только наоборот (button содержится в a). Боюсь, у вас есть только один вариант - использовать класс или отодвинуть свои button от своих a, потому что они семантически там не принадлежат.

...