疑似要素 a:after a:before を使用すると、リンクの一部のように見えるテキストを追加できます。ただし、リンクの一部としてその部分をクリックできるようにする方法がわかりません。
たとえば、次の css はその後の URL を示しています。
a:after {
content: " (" attr(href) ")";
}
...しかし、クリックできません。
基になる HTML を変更せずにこれを回避する人はいますか?
編集: クロム 13.0.782.107 を使用しています。それはバグであることが判明しました。（ありがとうショーン）
お使いのブラウザにバグが発見されたようです。
specに基づいて、生成されたコンテンツは、生成対象の要素の子として扱われる必要があります。これをテストするためにJSFiddleを作成しました。生成されたテキストは、ほとんどのブラウザーでリンクされています (Chrome 13 は唯一の例外です)。Chrome でテストしていると思います。これは再現可能なバグです。
回避策は、リンクの背景色を指定することです...すべてのリンクにこれを使用できるようにしたい場合は、背景画像を宣言します（ただし、画像を指定しないか、透明を使用します.gif-または指摘したように、opacity1) 以外に設定すると動作します。
私は同じ問題を抱えていましたが、どうやら設定した場合
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;
}
ドキュメントツリーの変更を回避するために、のJavaScriptクリックハンドラーを使用できますa:after。
編集：疑似要素がDOMに追加されないため、これは機能しません。
:beforeと: afterは、セレクターの前後にコンテンツを追加します。CSS には、タグ内のコンテンツを取得および編集できるセレクターはありません。これを実現する唯一の方法は、jQuery または JavaScript を使用して実際に HTML を編集することです。
リンクとテキストを別々にラップしました - :before はコンテナーに入り、リンクは内側に入ります。このようにして、:before を jQuery ティガーとして、テキストをリンクとして使用できます。HTML:
<li class="before-here"><a href="#">My Link Text</a></li>
CSS:
li.before-here:before{ //some css like an image }
Jクエリ:
$("li.before-here").click(function(){ //do something});
これを使用して、ツリーに表示/非表示の切り替えを作成しています。これにより、左側に必要なボタンが表示され、親にリンクできるようになります。
