CSS text-decoration hierarchy

Question

Apologies if this is a duplicate, but I'm enough of a CSS neophyte that I don't even know exactly what to search for.

I'm trying to modify text-decoration within a block by adding a span, and it's not working. How come? I can add a new text-decoration within the span, but I can't subtract the old one.

<h1 class="strikethrough">
    stricken<span class="no-strikethrough"> no strike</span>
</h1>

http://jsfiddle.net/zV3ga/2/

Is there a way I can achieve my goal? I'd like to inherit all the properties of the h1 except the text-decoration, so I'd really prefer to have my "no strike" text inside that tag.

Austin Pray · Answer 1 · 2013-07-11T05:46:21.027

3

I have no idea why these people are saying it isn't possible. This is entirely possible via CSS.

enter image description here

http://jsfiddle.net/austinpray/y5bRS/

.strikethrough {
    text-decoration: line-through;
    color: blue;
}

.no-strikethrough {
    display:inline-block;
    text-decoration: none;
    color: red;
}
.no-strikethrough:before {
    content: '\00a0';
}

edited Jul 11 '13 at 05:46

answered Jul 11 '13 at 05:33

Austin Pray

4,926
2
22
30

Not working in IE8, not working in IE7. If you care about supporting browsers in use today, this may not be an appropriate solution. – Patrick Moore Jul 11 '13 at 05:41
This does work, I remember seeing an answer to a similar question with more info: http://stackoverflow.com/questions/13618639/how-do-i-make-the-registered-symbol-not-display-an-underline/13618800#comment18675806_13618800 – David Nguyen Jul 11 '13 at 05:42
@SetSailMedia it works just fine in IE8 http://cl.austin.pe/image/1H361r3p2D39 – Austin Pray Jul 11 '13 at 05:53
@AustinPray take a look here to see where it's supported and where it's not, IE 8 and older does not... http://browsershots.org/http://devstage.co/strike.html – Patrick Moore Jul 11 '13 at 06:59

score 2 · Answer 2 · answered Jul 11 '13 at 05:30

2

Strikethrough applies to the entire parent element. It's rendered the full width of the parent, no way to "turn off" for a child.

Any reason not to use HTML markup?

<h1>Partial <strike>stricken</strike></h1>

HTML5:

<h1>Partial <del>stricken</del></h1>

answered Jul 11 '13 at 05:30

Patrick Moore

13,251
5
38
63

+1 goes to this answer. Quick and easy. – zkanoca Jul 11 '13 at 05:35
Isn't the usual reason for using CSS instead of HTML markup a good enough one? – jab Jul 11 '13 at 18:44

score 1 · Answer 3 · answered Jul 11 '13 at 05:29

1

You can't do this in its current form, you are putting a strike on the H1 which is the parent of span, you can't have a child reverse it.

answered Jul 11 '13 at 05:29

David Nguyen

8,368
2
33
49

Unfortunately, this is the case. Think of it as like applying a border to
then specifying no border on the ``, the `!important` keyword won't help because technically the `` never had a border to begin with.
– Dai Jul 11 '13 at 05:32

score 1 · Answer 4 · answered Jul 11 '13 at 05:32

1

<h1 >
    <span class="strikethrough">stricken</span><span class="no-strikethrough"> no strike</span>
</h1>

answered Jul 11 '13 at 05:32

Abdul Malik

2,632
1
18
31

Duh! Thanks - this will work in my case. – jab Jul 11 '13 at 18:50

score 1 · Accepted Answer · answered Jul 11 '13 at 05:35

1

I think you are trying to keep the first part with a atrile and the second part without a strike.

So do this

<h1>
    <span class="strikethrough">stricken</span> no strike
</h1>

And one more thing. Using hyphens in the class name is fine and dandy if youre just in CSS but when you move to Javascript that will cause problems (as far as my knowlege goes). So practice that way

answered Jul 11 '13 at 05:35

Ahmed

103
8

I know more JS than CSS, as it turns out. Hyphens in the class name don't cause any more difficulty than hyphens in the CSS attributes (e.g., `text-decoration`) - and this particular site is entirely static anyway. – jab Jul 11 '13 at 18:47
And +1 for the obvious answer. It won't work for some folks, but it works just fine for me. – jab Jul 11 '13 at 18:48

score 0 · Answer 6 · answered Jul 11 '13 at 05:34

0

I do not know if it is useful for you but you may try striking span's inner.

<h1 class="no-strikethrough">
   <span class="strikethrough">stricken</span> no strike
</h1>

answered Jul 11 '13 at 05:34

zkanoca

9,664
9
50
94

score 0 · Answer 7 · answered Jul 11 '13 at 05:36

0

Try it is the most optimized approach

<h1>stricken
    <span class="test">no strike</span>

</h1>

.test {
    text-decoration: line-through !important;
    color: blue;
}

h1  {
    text-decoration: none;
    color: red;
}

answered Jul 11 '13 at 05:36

Arun Bertil

4,598
4
33
59

CSS text-decoration hierarchy

7 Answers7

then specifying no border on the ``, the `!important` keyword won't help because technically the `` never had a border to begin with.