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/和大卫的另一个演示在这里：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 回答