Моделирование промежутка в теге привязки

Я пытаюсь сделать этот взгляд симпатичным, но я столкнулся с проблемой. У меня есть элемент промежутка, содержащий Подзаголовок или краткое описание в теге привязки. К сожалению, это разработало тот же путь как привязка, которая не является, как я хочу, чтобы это было. Я попытался применить моделирование к самому промежутку, но они, кажется, переопределяются стилями привязки. Проблема состоит в том, что я не хочу, чтобы это было подчеркнуто, когда ссылка колеблется.

Вот мой HTML.

        <ul>
           <li><a href="#">A <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">B <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">C <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">D <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">E <span class="subTitle">Subtitle</span></a></li>
        </ul>

И мой CSS

#leftNav ul li { position: relative; }
#leftNav ul li a span.subTitle
{
   bottom:          4px;
   color:           #000000;
   display:         block;
   font-size:       12px;
   left:            10px;
   position:        absolute;
   text-decoration: none;
}

Я попытался разработать сам промежуток, который, кажется, не имеет эффекта. Размещение промежутка вне привязки, относительно лития не работает также. промежуток блокирует событие при наведении курсора привязки, и это не активируемо по щелчку.