如何設置邊框的寬度大小

在我的應用程序的<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>

來源

2017-02-18 Umang Patwa

的'邊境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>

來源

2017-02-18 10:57:32

他希望它成爲'懸停效果' –

您可以使用: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>

來源

2017-02-18 10:59:49

他希望它成爲'懸停效果'，這很好。不錯的一個 –

您還可以使用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>

來源

2017-02-18 11:11:38

在小尺寸設備上無法正常工作 –

如何設置邊框的寬度大小

回答

相關問題