псевдо элементы a: после a: before позволяют добавлять текст, который, как представляется, является частью ссылки. Однако я не могу понять, как сделать эту часть кликабельной как часть ссылки.
Например, следующий css показывает URL-адрес позже:
a:after {
content: " (" attr(href) ")";
}
... но он не будет доступен для клика.
Кто-нибудь обойдет это без изменения базового HTML?
Изменить: Я использую chrome 13.0.782.107. Оказывается, это ошибка . (Спасибо, Шон)
Похоже, вы обнаружили ошибку в браузере, который используете.
Основываясь на spec, сгенерированный контент следует рассматривать как дочерний элемент того элемента, для которого он создается. Я создал JSFiddle, чтобы проверить это, и сгенерированный текст связан для меня в большинстве браузеров (Chrome 13 является единственным исключением). Я предполагаю, что вы тестируете в Chrome. Это воспроизводимая ошибка.
Обходным путем является просто указать цвет фона на ваших ссылках... если вы хотите использовать его для всех ссылок, объявляя фоновое изображение (но не указывая изображение или используя прозрачный .gif - или как указано, установив opacity на что-либо, кроме 1) работает.
У меня была такая же проблема, и, видимо, если бы я установил
a { vertical-align: middle; }
(таким образом, на самой ссылке, а не на псевдоэлементе), она работает.
Просто добавьте это в свой css:
a {padding-right:Ypx} /* Y = size of your url in pixels */
Если размер URL-адреса меняется, вам нужно будет использовать javascript для его получения.
Я надеюсь, что у кого-то есть лучшее решение, чем это, но на всякий случай нет, я придумал это ужасное/дерьмовое/взломанное решение:
a {
margin-right: 40px;
}
a:after {
content: " (" attr(href) ")";
margin-left: -40px;
}
До: и до: после добавления содержимого до и после селектора. В CSS нет селектора, который позволяет вам получать и редактировать содержимое внутри тега. Единственный способ сделать это будет с jQuery или javascript для фактического редактирования HTML.
Чтобы избежать изменения дерева документов, вы можете использовать обработчик JavaScript для a:after.
Изменить: Это не работает, потому что псевдомерные элементы не добавляются в DOM.
Я обернул ссылку и текст отдельно -: перед тем, как продолжить контейнер, и ссылка идет внутрь. Таким образом, я могу использовать: before, как тигр jQuery, и текст как ссылку. HTML:
<li class="before-here"><a href="#">My Link Text</a></li>
CSS
li.before-here:before{ //some css like an image }
Jquery:
$("li.before-here").click(function(){ //do something});
Я использую это, чтобы создать скрыть/показать toggle в дереве - это дает мне кнопку, которая мне нужна слева, и позволяет мне ссылаться на родителя.
