本文探讨了如何使用CSS实现hover状态下文字上方的过线效果，并希望调整过线与文字间的间距。当前的问题在于过线直接贴合文字顶部，缺乏足够的间距。
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:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
