Bold strike

HTML & CSS
1 
[b]code1[/b]

<span style="text-decoration: line-through">
wrong
</span>
<br>

The code2 below has bold font with strike while the code1 above has not bold font.

[b]code2[/b]

<span style="[COLOR="Red"]font-weight:bold[/COLOR];text-decoration: line-through">
wrong
</span>

I like to make it not bold font but bold strike.
The following would-be code is not work correctly, but it will show what I want.

[b]would-be code[/b]

<span style="[COLOR="Red"]strike[/COLOR]-weight:bold;text-decoration: line-through">
wrong
</span>
2

You cannot do that with CSS 2, line-through doesn’t get styled separately like you are wanting.

3

I do not believe this can be done with with a CSS attribute at the current time.

The only way I could think of to achieve a similar effect of a strong weight line-through would be like this:



<div style="background: #000; line-height: 3px;">
This is your strike-through text
</div>

This is definitely not a practical solution, but if you really needed it to work you could just set a width on the div and the above workaround would be sufficient.

4

You could do something like this also :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
b {
    border-bottom:3px solid #000;
    position:relative;
    top:-.5em;
}
b span {
    position:relative;
    top:.5em;
    font-weight:normal;
}
</style>
</head>
<body>
<p>This is an example of <b><span>bold strike through</span></b> text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi <b><span>bold strike through</span></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. </p>
</body>
</html>

Adjust the width of the border to suit.