link hover effect help

rrreee · Jun 7, 2007

Hi... If I have a link that contains a line break (link consists of two
words, one on top of the other) and I want a underline to appear ONLY on the
bottom line of text, how can this be done? Right now the underline effect
appears under both lines of text when hovering.

thanks

Adrienne Boswell · Jun 7, 2007

Hi... If I have a link that contains a line break (link consists of
two words, one on top of the other) and I want a underline to appear
ONLY on the bottom line of text, how can this be done? Right now the
underline effect appears under both lines of text when hovering.

thanks

Then change the link content.

M · Jun 7, 2007

I think if that's what he wants to do he would have done it...

I think previous poster is saying there is no other way to do it. It goes
with the tag -- you can't make only part of the link tag appear underlined.

M

Jonathan N. Little · Jun 7, 2007

M said:
I think previous poster is saying there is no other way to do it. It goes
with the tag -- you can't make only part of the link tag appear underlined.

Not sure why but...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>template</title>

<style type="text/css">
a.veryOdd { display: block; text-decoration: none; }
a.veryOdd span { display: block; }

/* you must set something directly to the pseudo
class else MSIE will not apply the rult to the
following child rule!
*/
a.veryOdd:hover { color: red; }
a.veryOdd:hover span { text-decoration: underline; }

</style>

</head>
<body>

<p>
Is this what you mean?
<a href="#" class="veryOdd">Double <span>Decker</span></a>
</p>
</body>
</html>

M · Jun 7, 2007

Okay, that's clever. It's one of those obvious "now why didn't I think of
that" things. . .

Good one.

M

rrreee · Jun 7, 2007

Jonathan N. Little said:
Not sure why but...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

Great that works perfectly. I'm actually using an image rather than an
underline but didn't go into that for simplicity sake. Just needed the idea
and that was very clever. Thanks

Adrienne Boswell · Jun 8, 2007

<p>
Is this what you mean?
<a href="#" class="veryOdd">Double <span>Decker</span></a>
</p>

I was going to suggest that, but I have some problems with it. "A link
wants to be a link" AND a link should make sense out of context. Decker
makes no sense, Double Decker does. Hense my previous post to change the
link text.

Jonathan N. Little · Jun 8, 2007

Adrienne said:
I was going to suggest that, but I have some problems with it. "A link
wants to be a link" AND a link should make sense out of context. Decker
makes no sense, Double Decker does. Hense my previous post to change the
link text.

I did preface that I did not know why one should want to do this. I am
in no way advocating one *should* do it, just that it can be done.

Can be done but one shouldn't!

a.blink { display: inline; }
a.blink:hover { display: block;}

Hover Slide Down	1	May 30, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
<Button ...> display is fine, except for two things	1	Oct 23, 2023
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Put image over the top of another image on hover	3	Feb 7, 2020
Neopets coding help	4	Sep 23, 2021
Help with my responsive home page	2	Dec 14, 2022
Need help with code on website (noob)	2	Jul 18, 2022

link hover effect help

rrreee

Adrienne Boswell

M

Jonathan N. Little

M

rrreee

Adrienne Boswell

Jonathan N. Little

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads