Question

我有以下内容：

HTML：

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

CSS：

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

如何设置下划线，使其只是发货，而不是+

Answer 1

最简单的选择是将“送货”字符串包装在另一个标记中，例如span，并将下划线仅应用于span：

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

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

我还尝试使用CSS生成的内容::before生成+字符，不幸的是（至少在Chrome 18 / Win XP中）这继承了其“父”{{1}的下划线元素，即使显式声明#plus-shipping。

Answer 2

工作演示有点不同：http://jsfiddle.net/d74Tn/＆amp;大卫的另一个演示驻留在这里：http://jsfiddle.net/davidThomas/d74Tn/1/

可以使用replace API，然后添加text-decoration: underline

我希望它会对你有所帮助。

<强>码

var $el = $('#plus-shipping');
 $el.html( $el.html().replace(/Shipping/g, '<span style="text-decoration: underline">Shipping</span>') );