文本上的文字阴影但不是删除线

Question

我有一个提交按钮

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

具有以下样式：

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;

但问题是删除线也有文字阴影。有没有办法将它分开，以便文本有阴影而不是删除线？

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

Answer 1

当其他一切都失败时，就像疯了一样作弊。

#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;
}

您可能需要设置边距和边框来说明按钮，填充等的行高。

编辑：请注意，这不适用于<input>，因为它是替换元素...但 与<button>一起使用，这是更多 - 或者更少的常规HTML容器。