2

私は次のものを持っています：

HTML:

<span id="plus-shipping">+ Shipping</span>

CSS:

span#plus-shipping {
    bottom: 25px;
    font-weight: bold;
    padding-left: 10px;
    position: relative;
    text-decoration: underline;
}

下線を設定して、+ ではなく配送だけにするにはどうすればよいですか

4

2 に答える 2

7

最も簡単なオプションは、'shipping' 文字列を別のタグで囲み、そのタグのみspanに下線を適用することです。span

#plus-shipping > span {
    text-decoration: underline;
}

<span id="plus-shipping">+ <span>Shipping</span></span>

JS フィドルのデモ。

また、CSS で生成されたコンテンツ::beforeを使用して+文字を生成しようとしましたが、残念ながら (少なくとも Chrome 18/Win XP では)、明示的に宣言されていた#plus-shippingとしても、「親」要素から下線を継承していました。text-decoration: none

于 2012-06-07T11:00:10.223 に答える
3

動作するデモは少し異なります：http：//jsfiddle.net/d74Tn/とDavidの別のデモがここにあります：http：//jsfiddle.net/davidThomas/d74Tn/1/

replaceAPIを使用してから追加できますtext-decoration: underline

お役に立てば幸いです。

コード

var $el = $('#plus-shipping');
 $el.html( $el.html().replace(/Shipping/g, '<span style="text-decoration: underline">Shipping</span>') );
​
于 2012-06-07T11:04:06.617 に答える