ベストアンサー

下線（アンカー）の表示を特定の文字のみ設定するには

2014/07/05 09:43

特定の文字には下線を表示させ、特定の文字には下線を表示させないようにするには？ <style type="text/css"> a { text-decoration: none; } </style> </head> <body> <a href="index.html">下線あり</a> <a href="index.html">下線なし</a> これだと、どちらも下線が付きません。 <a href="index.html">下線あり</a>は下線を付けるにはどうすればいいですか？

hmrusoyz
お礼率68% (24/35)

HTML
回答数3
ありがとう数8

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

wmin-2014
ベストアンサー率80% (8/10)

2014/07/11 17:45 回答No.3

予め分かっている文字列なら、手動でクラスを追加する方法が確実です。不規則な入力となるなら、jqueryの「txt.replace」を使って文字列を検知して置き換える方法があるかと。以下はサンプルです。 <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $('a').each(function(){ var txt = $(this).html(); $(this).html( txt.replace(/下線あり/g,'<span>下線あり</span>') ); }); }); </script> <style type="text/css"> a {text-decoration:none;} a span {text-decoration:underline;} </style> <p><a href="index.html">下線あり</a></p> <p><a href="index.html">下線なし</a></p>

質問者

お礼 2014/07/23 21:18

回答頂きありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/05 13:46 回答No.2

文法末外は置いておいて・・body直下にa要素は置けない。 <div class="nav"> 　<ol> 　　<li><a href="/">Top</a></li> 　　<li><a href="/Books">Books</a></li> 　　<li><a href="/Manual">Maanual</a></li> 　　<li><a href="contactUs.html">問合せ</a></li> 　</ol> </div> この場合 a{text-decoration:none;} a+a{text-decoration:underline;} a+a+a{text-decoration:none;} a[href="/Books"]{font-weight:bold;} a:nth-child(2n){font^size:2em;}

質問者

お礼 2014/07/23 21:18

回答頂きありがとうございました。

ログインすると、全ての回答が全文表示されます。

torayoshi
ベストアンサー率62% (910/1449)

2014/07/05 12:37 回答No.1

こんなことしてみるとか。 a{ text-decoration: none; } .hoge{ text-decoration: underline; } <span class="hoge"><a href="index.html">下線あり</a></span> <a href="index.html">下線なし</a> 段落ならインライン要素をブロックに。

質問者