J
jd
Does anyone know how to write a CSS line that will display a broken
underline on hover?
underline on hover?
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
G
Guest
looking at http://www.w3.org/TR/CSS2/text.html#q3, I don't see a dashed
underline listed.
underline listed.
J
Jon Spivey
a{
text-decoration:none;
}
a:hover{
border-bottom: 1px dashed red;
}
Cheers,
Jon
text-decoration:none;
}
a:hover{
border-bottom: 1px dashed red;
}
Cheers,
Jon
M
Murray
Be aware that this will make your link jump when hovered. If you want to
avoid that, you can do this -
a { text-decoration:none; border-bottom: 1px solid
#whatever-your-page-color-is; }
avoid that, you can do this -
a { text-decoration:none; border-bottom: 1px solid
#whatever-your-page-color-is; }
M
Mike Mueller
I did it using a class "underdash" and a hyperlink in this
example.
The border is defined size and colorwise for the non hover
state so the <a> text does not shift to accomodate the
border
<html><head>
<style type="text/css">
.underdash {border-bottom: 1px #fff solid;
text-decoration:none;}
.underdash a:hover {border-bottom: 1px #000 dashed}
</style>
</head>
<body>
<p class="underdash">
<a>Text Sample</a>
</p>
</body></html>
: Does anyone know how to write a CSS line that will display
a broken
: underline on hover?
:
:
example.
The border is defined size and colorwise for the non hover
state so the <a> text does not shift to accomodate the
border
<html><head>
<style type="text/css">
.underdash {border-bottom: 1px #fff solid;
text-decoration:none;}
.underdash a:hover {border-bottom: 1px #000 dashed}
</style>
</head>
<body>
<p class="underdash">
<a>Text Sample</a>
</p>
</body></html>
: Does anyone know how to write a CSS line that will display
a broken
: underline on hover?
:
:
J
Jon Spivey
Good point, thanks.
Cheers,
Jon
Cheers,
Jon
Murray said:Be aware that this will make your link jump when hovered. If you want to
avoid that, you can do this -
a { text-decoration:none; border-bottom: 1px solid
#whatever-your-page-color-is; }
M
Murray
That'd do it.
G
Guest
borders, heck i have even done this once for a client who wanted that.
That's what I get for making it more difficult and forgetting
That's what I get for making it more difficult and forgetting
M
Mike Mueller
Judging from the times that the other solutions were
presented, I think we were all thinking the same thing at
the same time...
: That'd do it.
:
: --
: Murray
: --------------
: MVP FrontPage
:
:
: : >I did it using a class "underdash" and a hyperlink in
this
: > example.
: > The border is defined size and colorwise for the non
hover
: > state so the <a> text does not shift to accomodate the
: > border
: >
: > <html><head>
: > <style type="text/css">
: > .underdash {border-bottom: 1px #fff solid;
: > text-decoration:none;}
: > .underdash a:hover {border-bottom: 1px #000 dashed}
: > </style>
: > </head>
: > <body>
: > <p class="underdash">
: > <a>Text Sample</a>
: > </p>
: > </body></html>
: >
: >
: >
: >
: > : > : Does anyone know how to write a CSS line that will
display
: > a broken
: > : underline on hover?
: > :
: > :
: >
: >
:
:
presented, I think we were all thinking the same thing at
the same time...
: That'd do it.
:
: --
: Murray
: --------------
: MVP FrontPage
:
:
: : >I did it using a class "underdash" and a hyperlink in
this
: > example.
: > The border is defined size and colorwise for the non
hover
: > state so the <a> text does not shift to accomodate the
: > border
: >
: > <html><head>
: > <style type="text/css">
: > .underdash {border-bottom: 1px #fff solid;
: > text-decoration:none;}
: > .underdash a:hover {border-bottom: 1px #000 dashed}
: > </style>
: > </head>
: > <body>
: > <p class="underdash">
: > <a>Text Sample</a>
: > </p>
: > </body></html>
: >
: >
: >
: >
: > : > : Does anyone know how to write a CSS line that will
display
: > a broken
: > : underline on hover?
: > :
: > :
: >
: >
:
: