CODEWITHSUNDEEP
javascriptjquerycss
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

underline certain words using jquery

I have the following:

HTML:

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

CSS:

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

How can i set the underline so its just the shipping and not the +

Upvotes: 2

Views: 1781

Answers (2)

Tats_innit
Tats_innit

Reputation: 34107

working demo bit different : http://jsfiddle.net/d74Tn/ & another demo from David reside here: http://jsfiddle.net/davidThomas/d74Tn/1/

Can use replace API and then add text-decoration: underline

I hope it will help you.

code

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

Upvotes: 3

David Thomas
David Thomas

Reputation: 253318

The easiest option would be to wrap the 'shipping' string in another tag, such as span and apply the underline to that span only:

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

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

JS Fiddle demo.

I also tried to use CSS-generated content ::before to generate the + character, unfortunately (at least in Chrome 18/Win XP) this inherited the underline from its 'parent' #plus-shipping element, even if text-decoration: none was explicitly declared.

Upvotes: 7

Related Questions