CSS Red Line Through?

ctfitch · #1 (**permalink**) 02-23-2004, 11:03 AM

Dig it. I'm working on a new site. I need the a:hover in the CSS to line through in red(with black text.) I have seen it done in Flash..thats easy. I need it to work in HTML/CSS.. Anyone have a nice clean coded solution? I have been experimenting with the following code to try and get it to work.

Basically using the inline command to try and define a certain values of the css style I'm working on.

End result should be: black underlined text as the a:link. and the a:hover should be black text with a red line through. I've gotten pretty close tweaking the inline stye around. still no avail.

Ex code:

p {
display: inline;
}
p.lthrough {
text-decoration: line-through; color: #000;
}
p.lthrough span {
color: #900;
}
----

This looks to have more possibility?
</p>
<p class="lthrough">
<span> ?</span>
</p>

This is a test.
</p>

Any takers???..when im done if I can get it.. It will look slick and I will make the CSS publicly available for all to download.

matauri · #2 (**permalink**) 02-23-2004, 12:04 PM

Is there any reason why you aren't putting it in your a:hover css tag? I havent tried it physically, but it would seem to me that it would be something like:

a:link { text-decoration: underline ; color: #000000 }

a:hover { text-decoration: line-through #ff0000 ; color: #000000 ; }

I could be wrong. Have never thought of trying it.

Cindy

ctfitch · #3 (**permalink**) 02-23-2004, 04:30 PM

If it were that easy I would have been done already.
Your code is perfect.. ideally. but the black text with the red line through is the tricky part.

Thanks for your help. I will keep you posted.

mikmik · #4 (**permalink**) 02-23-2004, 08:29 PM

... need ... more ... info ..*gasp*...please .. INFO, help me...

What browser are you viewing it in?
What DTD, and Charset are you declaring (prob charset doesn't matter), and mainly, is your declaration LAST in your css, and maybe try adding " !important " to it.

I am starting to see that this !important gets rid of some inheritance issues, and makes the bloody browser kmow who is boss!

please update, I am very interested as to the outcome :O)

ranjan · #5 (**permalink**) 02-24-2004, 06:22 AM

Quote:

a:hover { text-decoration: line-through #ff0000 ; color: #000000 ; }

This will never work!

ctfitch · #6 (**permalink**) 02-24-2004, 10:17 AM

DIG THIS!:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<del><span>This works!</span></del>
<style type="text/css">

del {text-decoration: line-through; color: #900; }
del span {color: #000;}

</style>
</body>
</html>

Yeah!. This rocks. I knew it could be done. Anyone have any tips on changing the color fo the red. I tried to no avail.

ctfitch · #7 (**permalink**) 02-24-2004, 10:23 AM

Who can make it work in a a:hover?

Any takers?

ranjan · #8 (**permalink**) 02-24-2004, 01:40 PM

Quote:

Who can make it work in a a:hover?

Nobody can. Its because the a tag in question is a single HTML element. A single element cannot have two defined style colors at one time.

One could make a javascript/dom based script to do it. But it would not be worth the weight the javascript would carry for the miniscule task.

My suggestion would be to forget it. Think something else.

ctfitch · #9 (**permalink**) 02-24-2004, 05:24 PM

Yeah your right.. I'll have to eat it on this one. Thanks to all for the help.

mikmik · #10 (**permalink**) 02-24-2004, 10:14 PM

How about an empty absolutely positioned box over top that shows a line onMouseover and the text underneath shows a color change.

I really need some sleep. Is that what you are trying to do, have a different colored 'line-through' from the text it is on?

ranjan · #11 (**permalink**) 02-25-2004, 02:24 AM

Quote:

How about an empty absolutely positioned box over top that shows a line onMouseover and the text underneath shows a color change.

Yes When you mouse over the link, The positioned div appears on it. (A show div script.) As soon as the div appears, it will be over the link, so you mouse has actually moused out of the link and moused over the div (even if its pixel position hasn't changed). So now you have to have a function to change the style of the link to hover state when mouse is over the div.

When you mouse out the div, you have to reset the link to its original state and hide the div itself.

Too much scripting for a tiny little task. Like I said it can be done, but its not worth doing it.

ranjan · #12 (**permalink**) 02-26-2004, 06:05 AM

I did it! With Pure CSS!!

THE CSS

Code:

<style type="text/css">
<!--
a:link {
	color: #333333;
	text-decoration: underline;
}
a:visited {
	color: #333333;
	text-decoration: underline;
}
a:hover {
	color: #FF0000;
	text-decoration: line-through;
}
a:active {
	color: #333333;
	text-decoration: underline;
}
.blktxt {
	color: #333333;
}
-->
</style>

THE HTML

Code:

<span class="blktxt">link</span>

See it in action:
http://ranjan.ws/scripts/csslinethrough.htm

ctfitch · #13 (**permalink**) 02-29-2004, 10:31 PM

Dude that was awesome. Very nice!!! hadnt thought of that.. Very smooth "Mr. Negative" :)

quote:
"My suggestion would be to forget it. Think something else."

thanks for thinking. you proved yourself wrong.

Ranjan is the man!!!!!

I'll post the link for the porject when I'm done.. you guys will like it..super cool html/dhtml/css site. im mocking flash and doing a super slick html site that makes you think its Flash.. wicked.

mikmik · #14 (**permalink**) 03-01-2004, 06:04 AM

ctfitch wrote

Quote:

thanks for thinking. you proved yourself wrong.

Ranjan is the man!!!!!

I agree!!

I admire those of us that check out our own assertions to see if we are right, and also those that will not quit until they know, and also admit it when they get a solution.
We are all about learning, yes?

Anyway, the old '<span> on hover' trick! How many times do I use it for tooltips on menus. haha.
Good one, ranjan. :O)

ctfitch · #15 (**permalink**) 03-05-2004, 11:25 AM

Allright guys..Ranjan clearly proved that the red line through can be done.

Challenge #2.. Make the red line stick as the a:visited..

So essentially all the links would be scratched out in red after you've clicked them.

Who's down?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode