user3117275 user3117275 - 1 month ago 8
CSS Question

CSS, Text-Decoration: Overline

I'm trying to create an overline effect on hover with css. What I have so far is below. Here's the problem I have, the over line appears directly above the text. I want there to be some space b/w them. Here is my site: http://baycity2014.weebly.com, and here's the effect I'm going for: http://www.hartlevin.com. Any advice?

CSS:

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}

#nav-wrap .container {
/*background:url(nav-bg-medium.jpg) repeat-x top;*/
/*height:45px;*/
}

#nav-wrap .container ul {
list-style: none;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
/* background:url(nav-saperator-medium.jpg) no-repeat right;*/
padding-right:2px;
}

#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
border-radius:5px 0px 0px 5px;
}

#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Helvetica', san-serif;
color: #000;
padding: 0px 30px;
border: 0px solid;
outline: 0;
list-style-type: none;
font-size: 16px;
line-height:45px;
/*text-shadow: 0px -1px 0px #333333;*/
}

#nav-wrap .container ul li:hover {
/*background:url(nav-saperator-hover-medium.jpg) no-repeat right;*/
}

#nav-wrap .container ul li a:hover {
/*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
color: #145D85;
text-decoration:overline;
}


HTML:

<div id="left_content_nav">
<ul class='wsite-menu-default'>
<li id='active'><a href='/'>Home</a>

</li>
<li id='pg886612977153583720'><a href='/about.html'>About</a>

<div class='wsite-menu-wrap' style='display:none'>
<ul class='wsite-menu'>
<li id='wsite-nav-226730044254468285'><a href='/blog.html'><span class='wsite-menu-title'>Blog</span></a>

</li>
</ul>
</div>
</li>
<li id='pg336904325932674008'><a href='/practice-areas.html'>Practice Areas</a>

</li>
<li id='pg342722679661255807'><a href='/press.html'>Press</a>

</li>
<li id='pg204649403653981064'><a href='/contact.html'>Contact</a>

</li>
</ul>
</div>

Answer

You should use border-top instead of overline, with some padding-top to pad up the spacing between the string and the top overline.

Just note that am using border-top: 4px solid transparent; which is just a transparent border to reserve the space, because if you won't use that, your menu items will shake on :hover as CSS Default Box Model counts the border outside the element instead of inside, which will result in element nudging..

Demo

HTML

<ul>
    <li><a href="#">Hello</a></li>
    <li><a href="#">World</a></li>
</ul>

CSS

ul {
    margin: 40px;
}

ul li {
    display: inline-block;
    padding-top: 5px;
    margin-right: 10px;
    border-top: 4px solid transparent;
}

ul li:hover {
    border-top: 4px solid #f00;
}

Controlling the width using :before or :after pseudo, HTML stays as above..

Demo 2

CSS

ul {
    margin: 40px;
}

ul li {
    display: inline-block;
    padding-top: 8px;
    margin-right: 10px;
    position: relative;
}

ul li:after {
    position: absolute;
    width: 90%;
    content: "";
    top: 0;
    left: 50%;
    margin-left: -45%;
}

ul li:hover:after {
    border-top: 4px solid #f00;
}