How To Underline Text Only On 2 Line Hyperlink With Indent

I am creating a sidebar menu that has several links, many of them that need to span 2 lines based on the title length and the width requirement of the panel. The design includes a

Solution 1:

If you don't need the line breaks to be manually added, you can set a hanging indent. That will not be underlined with the link.

Change your html as follows:

<fontface="Lucida Sans Unicode"color="#00457C"style="font-size: 11pt"><b><ahref="neuropsychological-assessment.htm"><fontcolor="#00457C">Neuropsychological Assessment</font></a></b><br></font><divclass='div_for_length'><fontcolor="#00457C"face="Lucida Sans Unicode"size="2"><divclass='link'>»
            <ahref="adhd.htm">Attention Deficit Hyperactivity Disorder</a></div></div>

And in your CSS rules add these:

.div_for_length {
    width: 250px; /* or whatever your needs are */
}

.link {
    display: block;
    float: left;
    text-indent: -1em;
    padding-left: 1em;
}

As a side note, if you're using CSS, you should avoid <font> tags. These should be expressed in CSS rules.

Solution 2:

use :before to make a custom bullet and if you give the link a width then the text will automatically go to the next line. http://jsfiddle.net/FbDGL/3/

HTML:

<fontface="Lucida Sans Unicode"color="#00457C"style="font-size: 11pt"><b><ahref="neuropsychological-assessment.htm"><fontcolor="#00457C">Neuropsychological Assessment</font></a></b><br></font><fontcolor="#00457C"face="Lucida Sans Unicode"size="2"><ahref="adhd.htm"class="arrows">Attention Deficit Hyperactivity Disorder</a><br>

CSS

a:link {text-decoration: none;
    color:#00457C;
    }
a:visited {text-decoration: none;
    color:#00457C;
    }
a:hover {text-decoration: underline}
a:hover.space {text-decoration: none}
a:active {text-decoration: none}

a.arrows:before{
    content: "»";
    position: absolute;
    margin-left: -10px;
}
a.arrows{
    margin-left: 10px;
    width: 200px;
    float: left;
}

And please dont use this:

<fontcolor="#00457C"face="Lucida Sans Unicode"size="2">
» <ahref="adhd.htm">Attention Deficit Hyperactivity<br><spanclass="space">&nbsp;&nbsp;</span>Disorder</a><br>

it's really sloppy. Keep all the styling in the CSS

<a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a>

Solution 3:

You should make use of a list with custom list-style-image instead. In the sample bellow I made a image of » and base64 encoded it. Live Deom

HTML

<divclass="some-class">Neuropsychological Assessment</div><ul><li><ahref="adhd.htm">Attention Deficit Hyperactivity Disorder</a></li></ul>

CSS

.some-class{
    font-family:"Lucida Sans Unicode";
    color:#00457C;
}
a:link,a:visited {
    text-decoration: none;
    color:#00457C;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none
}
ul {
    font-family:"Lucida Sans Unicode";
    width:200px;
    list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwVADcb2iGGJQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABQSURBVBjTfc8xEkBADAXQt6yCc7mdI2holcYV7Lk0O+zsIFXeT5EEJgRP1XZiQfywHjuO3NcGLWak2k0OArpi7e2IAVsejC+WsBZH1f5/8wJm7g+T7rifRwAAAABJRU5ErkJggg%3D%3D);
}

EDIT: You can for sure just set an image as list-style-image