Can I get dashed underline?

liunx · Jan 11, 2008

Can I get dashed underline with CSS? Not only:
text-decoration: underline;

something like:

underline-decoration: dashed; ??????
underline-style: dashed; ??????
underline-width: 1px; ????
underline-color: black; ???

How about just a dashed line w/o text, not a border:
border-style: dashed;
border-width: 1px;
border-color: black;

This is the Java Script for it, but I wanted it with CSS instead:

<html>
<head>
<style>

</style>
<body>
<span class="dashed">
Dashed Line Test
</span>
</body>
</html>

Thanks.
Jamesthere's no such property as far as I'm aware. If you want text with a dashed underline then the css you've posted is correct, although it should be as follows:

<html>
<head>
<style type="text/css">

</style>
<body>
<span class="dashed">
Dashed Line Test
</span>
</body>
</html>

for a dashed line without text play around with:
<div style="width: 100px/auto; display: inline/block; border-bottom: 1px dashed #000;"></div>

where there is something/something in the code above pick one of them. I.E. a horizontal line right across the page would be as follows:
<div style="border-bottom: 1px dashed #000;"></div>
as width is auto by default and display is block by default.

For a 100px line in the middle of a block of text,
<div style="width: 100px; display: inline; border-bottom: 1px dashed #000;"></div>

Does that help at all?put something into a span and then style the span with a bottom border. what dave said was very satisfying!Originally posted by jamesx521
This is the Java Script for it, but I wanted it with CSS instead:What you posted is CSS, not JavaScript. You had the work-around answer all along.<html>
<head>
<body>
<div style="width: 100px/auto; display: inline/block; border-bottom: 1px dashed #000;"></div>
<br>
<div style="border-bottom: 1px dashed #000;"></div>
<div style="width: 100px; display: inline; border-bottom: 1px dashed #000;"></div>
</body>
</html>

Can I get dashed underline?

liunx

Guest