[英]CSS, Text-Decoration: Overline
I'm trying to create an overline effect on hover with css. 我正在尝试使用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 .
这是我的网站: http : //baycity2014.weebly.com ,这是我想要的效果: http : //www.hartlevin.com 。 Any advice?
有什么建议?
CSS: 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: 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>
You should use border-top
instead of overline
, with some padding-top
to pad up the spacing between the string and the top overline. 您应该使用
border-top
而不是overline
,并使用一些padding-top
来填充字符串和顶部上划线之间的间距。
Just note that am using border-top: 4px solid transparent;
请注意,我使用的是
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.. 这只是一个保留空间的
transparent
border
,因为如果您不使用它,您的菜单项将会动摇:hover
为CSS默认框模型计算元素外部的border
而不是内部,这将导致元素轻推。 。
HTML HTML
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
CSS 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.. 使用
:before
或:after
伪控制width
,HTML保持如上。
CSS 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;
}
they use border-top instead of overline. 他们使用border-top而不是overline。 Please change this
请改变这个
#nav-wrap .container ul li a:hover {
/*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
color: #145D85;
text-decoration:overline;
}
into this 进入这个
#nav-wrap .container ul li a {
border-top:2px solid transparent;
}
#nav-wrap .container ul li a:hover {
color: #145D85;
border-top:2px solid #145D85;
}
<ul>
<li> <a href="#"> Item 1 </a> </li>
<li> <a href="#"> Item 2 </a> </li>
<li> <a href="#"> Item 3 </a>
<ul>
<li> <a href="#"> Sub Item 1 </a> </li>
<li> <a href="#"> sub Item 1 </a> </li>
</ul>
</li>
</ul>
CSS CSS
body
{
background:grey;
}
ul li ul
{
display:none;
}
ul
{
list-style-type:none;
}
ul li
{
float:left;
width:130px;
margin:0px;
padding:10px;
background-color:#003366;
text-align:center;
}
ul li a{
color:white;
text-decoration:none;
}
ul li:hover
{
border-top:4px solid white;
margin-top:-4px;
}
ul li:hover ul
{
display:block;
margin-left:-50px;
margin-top:10px;
}
ul li ul li
{
background-color:#ffffff;
height:100%;
padding:10px;
}
ul li ul li a
{
color:#003366;
}
Output: 输出:
您可以将菜单放在<span></span>
并为该范围设置border-top。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.