Hi,
I'm using the "text-decoration:line-through" in CSS, but I can't seem to find any way to vary the line thickness without inelegant hacks like hr or image overlays.
Is there any elegant way to specify the thickness of a line-through?
Thanks!
+2
A:
No.
However, if the strike-through color is the same as the text color, you can easily get away with using a custom image in the background.
If you require different colors, then overlaying the custom strike-through image is the only way to go.
Matt
2010-03-29 15:41:04
I found that this works for different colours: http://stackoverflow.com/questions/1107551/css-strikethrough-different-color-from-textThe only obstacle is thickness. I can't find any easy solutions either... maybe this is not worth pursuing.
Koh Wei Jie
2010-03-29 16:51:50
+1
A:
short answer: no. it depends on the font, it's the same for the thickness of underline—it changes with the thickness of the text
knittl
2010-03-29 15:41:10
A:
The line thickness is determined by the font (family, size, etc.). There is no provision in CSS for changing this http://www.w3.org/TR/REC-CSS1/#text-decoration
Bradley Mountford
2010-03-29 15:49:51
A:
I have an idea but it would require adding an additional element for each level of thickness.
html
<span><strike>test test</strike></span><br />
<span id="test"><strike> </strike></span>
css
span {height:1em}
#test {position:relative;top:-1.3em}
BTW the spaces in the second span are specials - you will have to use alt+0160 or alt+255.
You can use pixels unit too on the negative top when ull try to position it precisely.
There is another alternative which involve using first text-decoration and then style <strike> or <del> and see if you can nudge it vertically without moving the text with it.
html
<span><strike>test test</strike></span>
css
span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}
Both are working fine here, but remember to use a transitional doctype cause <strike> has been deprecated.
Knu
2010-03-30 05:35:29
A:
This does not answer the question, but is relevant in that it solves the lack of a unique strike-through using scripting. I am not a purist, but I believe this is a x-browser solution.
<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
$(this).wrap("<span style='position:relative;left:0px;top:0px;'>").
before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+
"position:absolute;width:100%;left:0px;'></span>" ).
wrap("<span style='position:relative;left:0px;top:0px;'>");
}
$(function(){
$('.strike_out').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>
underdog
2010-10-21 23:24:06