Search code examples
htmlhyperlinktagshref

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 ?

Solution

  • 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.