[英]Underline Text CSS Gap
I want my text to be underlined when it's active but when I did it looks like this: 我希望文本处于活动状态但要加下划线,但是在执行时看起来像这样:
I just only want the text to get underlined, if I used text-decoration:underline
it underline the word but the I don't know how to make a gap between the text and the underline. 如果我使用text-decoration:underline
,则只希望对文本加下划线,但是我不知道如何在文本和下划线之间加间隔。 I added new class .currents
. 我添加了新类.currents
。
Here is my code: 这是我的代码:
<header id="header" class="transparent-header" data-sticky-class="not-dark">
<div id="header-wrap" style="height:180px;">
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="style-2 center">
<div id="primary-menu-trigger">
<i class="icon-reorder"></i>
</div>
<div style="text-align:center">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">
<li>
<a href="index.html"><div>Home</div></a>
</li>
<li>
<a href="about.html"><div>WHO WE ARE</div></a>
</li>
<li>
<a href="products.html"><div>WHAT WE TRADE</div></a>
</li>
<li>
<a href="services.html"><div>SERVICES</div></a>
</li>
<li class="currents">
<a href="logistic.html"><div>LOGISTICS</div></a>
</li>
<li>
<a href="contact.html"><div>CONTACT</div></a>
</li>
</ul>
</div>
</nav><!-- #primary-menu end -->
<br>
</div>
</header><!-- #header end -->
CSS: CSS:
.currents {
height: 3em;
border-bottom: 1px solid ;
/* margin-bottom: 5px;*/
}
Here is the working jsfiddle. 这是工作中的jsfiddle。 Thanks in advance 提前致谢
https://jsfiddle.net/light22/atzL4ahu/#&togetherjs=eLF0v1iEs8 https://jsfiddle.net/light22/atzL4ahu/#&togetherjs=eLF0v1iEs8
You can use border-bottom
(instead of text-decoration:underline
) and padding-bottom
to achieve your wish. 您可以使用border-bottom
(而不是text-decoration:underline
)和padding-bottom
来实现您的愿望。
Like this: 像这样:
a { text-decoration:none; display:inline-block; border-bottom: 1px solid; } .gap { padding-bottom:15px; }
<a href="#">without gap</a> <a href="#" class="gap">with gap</a>
You could wrap the text in a <span>
tag. 您可以将文本包装在<span>
标记中。 Here's a working JSFiddle demonstrating this. 这是一个工作的JSFiddle演示了这一点。
https://jsfiddle.net/j7wo5pxx/ https://jsfiddle.net/j7wo5pxx/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.