CSS: Dotted underlined tekst

Heeft iemand een idee hoe je tekst dotted underlined krijgt? Ik zag dat ergens op een van de vele CSS-resource pagina's die het web rijk is. Hoewel ik de vraag daar bij de beheerder heb gedeponeerd krijg ik geen antwoord, misschien heeft iemand anders een idee?

Probeer eens:

[code:1:042020e189]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css" title="text/css">
<!–
span {
border-bottom: 1px;
border-bottom-style: dotted
}

</style>
</head>
<body>

<span>
Hello
</span>

</body>
</html>
[/code:1:042020e189]

Hoi,

Ik ben geen CSS kenner, maar staat dat niet toevallig ergens op
http://www.csszengarden.com/

Ik heb even op Google gezocht op “CSS dotted underline”, en dit kwam ik tegen:

Misschien heb je er wat aan :slight_smile:
Er staat trouwens nog veel meer op Google met die zoekfunctie,
maar dit waren de duidelijksten volgens mij.

Mvg,
Joram

border-bottom: 1px dotted

Lijkt me.

Dit ziet er iets mooier uit ook voor solid underlines. Lijntje staat iets verder van de link. [code:1:0d34b3fd38]a { text-decoration: none; border-color: white; border-bottom: 1px; border-style: dotted; }[/code:1:0d34b3fd38]

[quote:6322fc0f68="Nietzman"]border-bottom: 1px dotted[/quote:6322fc0f68]Je moet [code:1:6322fc0f68]text-decoration: none;[/code:1:6322fc0f68] nog altijd definiëren, anders werkt het in sommige browsers niet.

Om wat voor tekst gaat het? Is het een paragraaf, een titel, een snippet tekst, of een link? Dat is toch wel van belang als je betekenisvolle XHTML/CSS wil schrijven.

[quote:c3635ce463="Sen"]Dit ziet er iets mooier uit ook voor solid underlines. Lijntje staat iets verder van de link. [code:1:c3635ce463]a { text-decoration: none; border-color: white; border-bottom: 1px; border-style: dotted; }[/code:1:c3635ce463][/quote:c3635ce463]

Dit kan je beter samenvatten als volgt. Bespaart ruimte en bandbreedte als je dit consequent toepast:

[code:1:c3635ce463]a
{
text-decoration: none;
border-bottom: 1px dotted #FFF;
}[/code:1:c3635ce463]

Het gaat om links. Gewoon een woord in een lap tekst dat als zodanig is onderstreept.

[quote:82ed79d715="joram"]- http://www.htmldog.com/ptg/archives/000028.php[/quote:82ed79d715] Hier zag ik dat inderdaad, maar hoe hij dit deed ... dat is de vraag.

Wanneer je deze XHTML-code neemt:

[code:1:a5587e7803]<p>Dit is tekst, en dit is een <a href="#">link</a>.</p>[/code:1:a5587e7803]

en deze CSS:

[code:1:a5587e7803]
a {
text-decoration: none;
color: #333; /* verander de kleur voor je link /
border-bottom: 1px dotted #FFF; /
verander de kleur voor de puntjesborder onder je link */
}

a:hover {
border-bottom: 1px solid #FFF; /* verander de kleur voor de vaste border onder je link */
}[/code:1:a5587e7803]

…zou het perfect moeten werken. Je moet wel nog even de kleur verander voor je link en de border, dat heb ik ernaast in commentaar gezet.

Retegaaf, allemaal bedankt!!!