特定の文字には下線を表示させ、特定の文字には下線を表示させないようにするには？ a { text-decoration: none; } 下線あり下線なしこれだと、どちらも下線が付きません。下線ありは下線を付けるにはどうすればいいですか？

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

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

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

解決済

質問者：hmrusoyz
質問日時：2014/07/05 09:43
回答数：3件

特定の文字には下線を表示させ、特定の文字には下線を表示させないようにするには？

<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>は下線を付けるにはどうすればいいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： wmin-2014
回答日時：2014/07/11 17:45

予め分かっている文字列なら、手動でクラスを追加する方法が確実です。

不規則な入力となるなら、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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/07/23 21:18

No.2

回答者： ORUKA1951
回答日時：2014/07/05 13:46

文法末外は置いておいて・・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;}

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/07/23 21:18

No.1

回答者： torayoshi
回答日時：2014/07/05 12:37

こんなことしてみるとか。

a{ text-decoration: none; }
.hoge{ text-decoration: underline; }

<span class="hoge"><a href="index.html">下線あり</a></span>
<a href="index.html">下線なし</a>

段落ならインライン要素をブロックに。