selctor:hover.class applied before hover - css

Question

I want to apply a link selector hover effect which includes bottom border underline in an unordered list. Really, I know I can do a simple underline using a border-bottom: #FFFFFF solid 2px;, but I'd like to make a custom underline with box-shadow effect. So I have two issues.
my border is showing up all the time, not just when I hover.
When I tried to add a box shadow to my .underline class it goes around the whole list item and does not create a separate line. I guess we can get to this item later.
MY CSS CODE
li {
margin: auto 0px 20px auto;
font: 1em 'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255,255,255,0.5);
display: block;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
}
.underline {
border-bottom: #FFFFFF solid 2px;
}
MY HTML CODE
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a></li>
<li>Revealing CSS3 Menu</li>
</ul>
I would really like to be pointed to a comprehensive article about how to build rich HTML elements via CSS specfically using :before and :after and being able to use multiple classes on one selector in CSS properly.
Here is a JSFiddle of what I have (broken) http://jsfiddle.net/jellis3d/a8svpwr4/2/. Also here is a picture of what I'm after. I really exaggerated the underline in order to show what I'm looking for. The line does not have to have rounded edges either.

Answer 1

You could do it by apply border-bottom to .underline:hover and box-shadow and display: inline-block; to li a tag.
JSFiddle - DEMO
HTML:
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a>
</li>
<li>Revealing CSS3 Menu
</li>
</ul>
CSS:
body {
background: gray; /* only for demo */
}
li {
margin: auto 0px 20px auto;
font: 1em'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
display: inline-block;
box-shadow: 0px 5px 5px #000;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.underline:hover {
border-bottom: #FFFFFF solid 2px;
}

Answer 2

i have made a basic demo on js fiddle showing what i think your after
jsfiddle link
it uses the below css which im sure you can then see what i did and make it into what your after.
li a{
color:blue;
text-decoration:none;
}
li a:hover{
color:red;
border-bottom: black solid 1px;
box-shadow: 10px 10px 5px #888888;
}

Answer 3

You want to add a box-shadow effect on hovering, right? You don't need to use an extra element like .underline then. Just add it to li a:hover
li a:hover {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
box-shadow: 0 1px 0 0 rgba(0,0,0,1);
}
You can read more about pseudo-elements like :before and :after on W3C: http://www.w3schools.com/css/css_pseudo_elements.asp
I made a small demo with your code using :before on hover: http://jsfiddle.net/m9czpzs5/