How to give Diagonal strikethrough on variable length text

How to give Diagonal strikethrough on variable length text? any help will be a great help fro me

There is no CSS implementation for a diagonal strikethrough (that I am aware of) however you could possibly achieve the effect with a background image layered behind the text itself to achieve a similar effect.

I think you have two options, the pretty one using an foreground transparent gif in the <del> element, stretching over the strike-through length.



del{
	position:relative;
	text-decoration:none;
	font-style:normal;
}
img{
	position:absolute;
	top:.2em;
	border:0;
	width:100&#37;;
	height:.8em;
}

<p>Some text <del><img src="images/strikethrough-transparent.gif" alt="">with a diagonal strike thruogh a part</del> of it.</p>

The other option is the semantically better, using a repeating background on the <del> element.

del{
	background:url(images/strikethrough-transparent.gif) 0 .2em repeat-x;
	text-decoration:none;
}
<p>Some text <del>with a diagonal strike thruogh a part</del> of it.</p>

what’s wrong with this –

.strike {text-decoration: line-through;}

<p>Blah <span class="strike">whoops</span> blah blah</p>

@Rudy: How do you make that diagonal, as the OP asked for? :confused:

well, tommy, that’s the point, isn’t it

why go looking for a kludge when standard css/html does the same job

:cool:

and besides, what would a “diagonal” strikethrough look like?

you certainly wouldn’t be able to “stretch” an image across more than a few characters before it started looking like a regular strikethrough

:slight_smile:

Good Example Rudy! :slight_smile: