Emulate a span with line breaks? 1

[Sleidia]

Hi guys,

In the code below, how could I make it possible to have
the bottom borders the same width as their respective text
links while keeping the line breaks?

The trick is that I need to do that by editing only the CSS.
The HTML part must remain unchanged.

Also, the bottom border's color must be different than
the one of the link.

Thanks for helping!

#area-left-nav a {

display: block;
text-decoration: none;
color: #000000;
font-weight: bold;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid #BFBFBF;
    
}

_______ not to be changed __________

<div id="area-left-nav">

<a href="">jsgdsjdgqjsdgj</a>
<a href="">sdsqdqsd</a>
<a href="">shdsdskdhsdhdkhdsdjddd</a>
<a href="">dsqdsdq</a>
<a href="">dqdsqdqsdsddsqdsdq</a>

</div>

 

[Foamcow]

Try floating each element and then setting it to clear:left

#area-left-nav a {

display: block;
text-decoration: none;
color: #000000;
font-weight: bold;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid #BFBFBF;
[COLOR=red]float:left;
clear:left;
[/color]
    
}

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Sleidia]

Yay! that works

Thanks a lot!