Spacedust Spacedust - 6 months ago 8
HTML Question

Different styling of the same <a> hyperlink in one line

I'm bulding a website where you can see a bit complicated situation: http://test.internet.az.pl/panel/lost_password.php

I want the same dotted line under my text as in this link showing under "Powrót do strony logowania >"

So I needed to create 3 different in order to remove it, one for text, one for space and one for ">" image symbol:

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
<a class="a" href="index.php">Powrót do strony logowania</a>
<a style="border:0px; text-decoration:none" href="index.php"></a>
<a href="index.php"><img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px"></a>
</div>


Is there any way to reduce this code ?

Answer

Yes, use spans and img within one anchor.

Something like this:

<a class="a" href="index.php">
    <span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" />
</a>

CSS:

a.a span {border-bottom: 1px dotted;}
a.a img {border: 0;}

Btw. try to avoid inline styling.