Geek Answers Handbook

Styling spacing in anchor shortcut

I am trying to make this look beautiful, but I have a problem. I have a span element containing a Subtitle or a short description inside an anchor tag. Unfortunately, this style is just like an anchor, which is not the way I want. I tried applying the style to the range itself, but they seem to be overridden by snap styles. The problem is that I do not want this to be underlined when the link is hanging.

Here is my 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>

And my 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;
}

I tried styling the range itself, which seems to have no effect. Placing a span outside the anchor with respect to whether it does not work either. span blocks an anchor hang event and cannot be pressed.

+5
source share
2 answers

( div id ), , :

http://jsfiddle.net/44ndf/1/

, , , , , , . (, , ) , , .

, , :

1) , (, div id "leftNav",

2) , defintiely - , - , , - , .

3) Firebug, , , CSS, , .

Edit:

, (, , ) . :

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a>

:

#leftNav ul li a span.subTitle
{
    text-decoration: none;
}

#leftNav ul li a span
{
 text-decoration: underline;   
}

#leftNav ul li a
{
 text-decoration: none;  
}

, . , , , . , , , (, , ).

, , IE, , - http://jsfiddle.net/44ndf/5/ IE, firefox. , abotu , .

+3

, , , , !important CSS. - :

#leftNav ul li a span.subTitle
{
   bottom:          4px;
   display:         block;
   font-size:       12px !important;
   left:            10px;
   position:        absolute;
}
+1

More articles:


All Articles