Styleable line-through

by sanford

HTML

<div><span>as I was saying, that didn't work 
    so well</span></div>

CSS

body { background:transparent; }
div {
    width:300px;
    white-space:wrap;
    position:relative;
    border: 16px solid rgba(220,10,10,.3);
    padding: 0 36px 32px 36px;
}
span {
    font: 56px/64px Georgia;
}
body{padding:30px;}
span {
    
    background: transparent url(/favicon.png) no-repeat 60% top;

    /* non-IE only */
    border-width: 0 0 16px 0;
    border-style: solid;
    border-bottom-color: rgba(220,10,80,.3);
    color: transparent;
    text-shadow: 0 14px 0 chocolate;

    /* Moz, WebKit, AND IE 9+*/    
    color: chocolate;
    border: none;
    /* first box shadow has HIGHER z-index! */
    box-shadow: inset 0px -.5em 0 0 white, inset 0px -.6em 0 0 rgba(220,10,80,1);
    text-shadow: none;
    position:relative;
    top:14px;
    
}

JavaScript

/**

Despite the test text, this CS S-only experiment DID work pretty well!

The original goal was to have style-able line-through, perhaps either for glitch design (style only) or for the semantic meaning but a either more subtle (gray, translucent linethrough on black text) or maybe more abrupt (redlining).

The first solution was  to use transparent text with a bottom-border (color and thickness at your discretion), then use a crisp text-shadow (no feather) for the actual visible text.  Using the y-offset of the shadow allows you to place the "shadow" precisely in relationship to the border, so the border can look like a fancy underline (as in /3) or a line-through or whatever.  Note the text-shadow is actually on top of the border, which is a useful effect but it would also be good to be able to have it be the other way around. 

This first solution worked well for placing a line anywhere under the text, but unfortunately IE9 doesn't do text-shadow, so no dice.

The alternative was to use inset box-shadow, which works as far back as IE 9.  I layer a white box shadow over a larger red shadow here, both with negative y-offsets, so they creep inside the box and make what looks like a strike-through.  Nice!

You can also get other effects by just using one colored box-shadow, like a nice blocky underline.



This experiment also proved stuff about wrapped line boxes that's good to keep in mind in less special-effect-type situations. For example, making a 45deg border at the bottom right (by the common method of abutting transparent and colored borders) only takes effect at the very end of the line (the word "well").  Similarly, the background-image is at the 60% mark vertically, but the browser does this by figuring out where 60% would be if the line box were NOT wrapped and then keeps it there regardless of wrapping.  Kind of cool.  Yet, in contrast, if you apply a box-shadow to the bottom and right, it will appear separately on each one of the wrapped lines.

*/