CODEWITHSUNDEEP
css
cameronjonesweb
cameronjonesweb

Reputation: 2526

Text shadow on text but not strikethrough

I have a submit button

<input type="submit" id="addToCart" value="Add to cart">

with the following styling:

text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration: line-through;

But the issue is that the strikethrough line has the text shadow too. Is there a way to separate it so that the text has the drop shadow but not the strikethrough?

FIDDLE : http://jsfiddle.net/cxJ4a/

Upvotes: 2

Views: 250

Answers (1)

Eevee
Eevee

Reputation: 48594

When all else fails, cheat like crazy.

#addToCart {
    position: relative;
}

#addToCart:before {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    margin-top: 0.5em;
    border-top: 1px solid white;
}

You may need to fiddle with the margin and border to account for the line height of the button, padding, etc.

edit: Note that this doesn't work with <input>, because it's a replaced element... but it does work with <button>, which is a more-or-less regular HTML container.

Upvotes: 4

Related Questions