如何设置边框

Question

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

Answer 1

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

Answer 2

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

Answer 3

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