Spacedust Spacedust - 1 year ago 46
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:

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>

Is there any way to reduce this code ?

Answer Source

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.a span {border-bottom: 1px dotted;}
a.a img {border: 0;}

Btw. try to avoid inline styling.