如何设置边框的宽度大小

问题描述：

在我的应用程序的<a>标记中，我使用border-bottom属性在下面显示下划线链接，而不是使用（text-decoration:Underline;），它工作正常，但我想显示边框底部的一半链接文本移动设备和电脑，如： -如何设置边框的宽度大小

我试图border-width财产存档这一点，但它增加其厚度。

请指教我如何减少其宽度？在此先感谢

nav ul li a { 
 
       color: white !important; 
 
       font-weight: 600; 
 
      } 
 

 
       nav ul li a:hover { 
 
        padding-bottom: 8px; 
 
        border-bottom: 4px solid #9d9d9d; 
 
       }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid" style="background-color: #2f2f2f !important;"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand swing" href="#" style="color:white; font-weight:600;font-variant:small-caps">Umang International School</a> 
 
      </div> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
       <ul class="nav navbar-nav"></ul> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="#">About</a></li> 
 
        <li><a href="#">Gallery</a></li> 
 
        <li><a href="#">Contact Us</a></li> 
 
        <li><a href="#">Examination</a></li> 
 
        <li><a href="#">Help Desk</a></li> 
 
        <li><a href="#">Addmission</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

的'边境bottom'只要它是在一个'：hover'是基于'了'的宽度本身。如果有任何问题，请为'a'发布整个'css'，以便我们可以看到问题出在哪里 –

Try @jones answer –

我尝试过，但没有工作，当我们有多个链接@OkeTega –

答

可以使用:after伪元素创建边框。

a { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    text-decoration: none; 
 
} 
 
a:after { 
 
    content: ''; 
 
    width: 60%; 
 
    height: 2px; 
 
    background: black; 
 
    transition: all 0.3s ease-in; 
 
    opacity: 0; 
 
} 
 
a:hover:after { 
 
    opacity: 1; 
 
}

<a href="#">Contect Us</a>

他希望它成为'悬停效果' –

答

您可以使用:after元素的，而不是添加border-bottom的链接本身是这样的：

a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
a:hover:after { 
 
    content: ' '; 
 
    display: block; 
 
    width: 60%; 
 
    margin-left: 20%; 
 
    border-bottom: 4px solid black; 
 
    padding-bottom: 4px; 
 
}

<a href="#">Contect Us</a>

他希望它成为'悬停效果'，这很好。不错的一个 –

答

您还可以使用background-size并添加一个transition，全力为其他目的的伪;）

a 
 
{ 
 
    text-decoration:none; 
 
    padding-bottom:4px; 
 
    background:linear-gradient(black,black) no-repeat bottom center; 
 
    background-size: 0% 1px ; 
 
    transition:0.25s 
 
} 
 
a:hover 
 
{ 
 
    background:linear-gradient(black,black) no-repeat bottom center; 
 
    background-size: 65% 4px ; 
 
}

<a href="#">Contect Us</a>

如何设置边框的宽度大小

相关推荐