web-dev-qa-db-ja.com

リンクの一部としてa：after / before擬似要素をクリック可能にすることは可能ですか？

疑似要素a：after a：beforeを使用すると、リンクの一部と思われるテキストを追加できます。ただし、その部分をリンクの一部としてクリック可能にする方法がわかりません。

たとえば、次のcssは後でURLを示しています。

  a:after {
     content: " (" attr(href) ")";
  }

...しかし、クリックはできません。

基礎となるHTMLを変更せずにこれを回避する人はいますか？

編集：chrome 13.0.782.107を使用しています。これは bug です。（Seanに感謝）

htmlcssgoogle-chromepseudo-element
35
Catskul

使用しているブラウザでバグを発見したようです。

spec に基づいて、生成されたコンテンツは、生成対象の要素のchildとして扱う必要があります。これをテストするために JSFiddle を作成し、生成されたテキストはほとんどのブラウザーでリンクされています（Chrome 13は単独の例外です）。これは再現可能なバグです。

回避策は、単にリンクの背景色を指定することです...すべてのリンクにこれを使用したい場合は、背景画像を宣言します（ただし、画像を指定しないか、透明な.gifを使用します-または先ほど指摘したように、opacityを1以外に設定します） works 。

28
Sean Vieira

私は同じ問題を抱えていて、明らかに設定すると

a { vertical-align: middle; }

（したがって、リンク自体にnot擬似要素）、動作します。

3
Tom

これをcssに追加するだけです：

a {padding-right:Ypx} /* Y = size of your url in pixels */

URLのサイズが異なる場合は、JavaScriptを使用して取得する必要があります。

2
Knu

私は誰かがこれよりも良い解決策を持っていることを望んでいますが、念のために、私はこの恐ろしい/くだらない/ハッキングな解決策を思いつきました：

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }
1
Catskul

：beforeおよび：afterコンテンツを追加beforeおよびafterセレクター。 CSSには、タグ内のコンテンツを取得および編集できるセレクタはありません。それを実現する唯一の方法は、jQueryまたはjavascriptを使用して実際にHTMLを編集することです。

0
Dan Short

リンクとテキストを別々にラップしました。：beforeはコンテナに移動し、リンクは内部に移動します。このように、jQueryティガーとして：beforeを使用し、リンクとしてテキストを使用できます。 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});

これを使用して、ツリーに非表示/表示切り替えを作成します。これにより、左側に必要なボタンが表示され、親にリンクできます。

open toggle with link

closed toggle with link

0
Daniel Lefebvre

ドキュメントツリーの変更を回避するには、a:afterのJavaScriptクリックハンドラーを使用できます。

編集：擬似要素はDOMに追加されないため、これは機能しません。

0
paulmelnikow