A span
is a meaningless tag, so it won't give extra 'weight' to your code. Therefor, imho, it is okay to use it (but better to avoid).
Alternatively you could do the following:
<ul>
<li><a href="news.html">О нас</a></li>
<li><a href="#">Галерея</a></li>
</ul>
a {
font-size: 30px;
text-decoration: none;
position: relative;
}
a:hover:after {
content: "";
border-bottom: 2px solid #ec6713;
position: absolute;
left: 0;
right: 0;
bottom: 3px;
}
And a DEMO.
Please note that the :after
is overlapping the a
. I've tried adding a z-index
, but that didn't fix it.
OPTION 2
Add a background-image to your a
.