Question

我遇到了有趣的下划线效果，如下所示：

CSS smaller underline

这很简单，但我不能想到一种方法来实现它，而不使用标记中的其他html元素，这将不是语义。我想知道是否有可能使用CSS实现它，没有任何额外的元素。效果本质上是一个下划线/底部边框，它小于元素并位于其下方。

这是我的导航标记，此效果将用于当前页面链接。

            <nav id="navigation" class="right">
                <ul>
                    <li> <a href="#">Home</a> </li>
                    <li> <a href="#">About</a> </li>
                    <li> <a href="#">Work</a> </li>
                    <li> <a href="#">Blog</a> </li>
                    <li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

Answer 1

试试这个 - http://jsbin.com/lumasive/1/

#navigation li a { position:relative; }
#navigation li a:after {
      content: '';
      position:absolute;
      bottom:0;
      left: 30%;
      right: 30%;
      height: 2px;
      background:red;
      display:block;
}

Answer 2

与其他人一样，使用伪，但在流程中： DEMO

li ,a { 
  display:inline-block;
  color:#EE7972;
  font-size:40px;
  font-variant:small-caps;
  text-decoration:none;
}
a {
  margin:1em;
}
a:after {
  content:'';
  display:block;
  height:0.2em;
  width:35%;
  margin:auto;
  border-bottom:solid ;
}

   a:hover {
      color:turquoise;/* change color of text and mini-border*/
   }

Answer 3

没有其他HTML： jsFiddle

您可以使用＆＃34;＆＃34;＆＃34; css属性：

a:after {
  display: block;
  position: absolute;
  content:"__";
  width: 100%; top: 10px;
  text-align: center;
  left: 0;
}

Answer 4

您可以使用:after伪元素追加额外标记a元素：

与所有其他答案一样，但可能需要的CSS少一些。

a:after {
  display: block;
  content: "";
  width: 60%;
  margin: 0 auto;
  border-bottom: solid 1px steelblue;
}

http://codepen.io/anon/pen/qebHo

Answer 5

使用＆＃34;＆＃34;财产来实现这一目标。：jsFiddle

CSS：

.right ul li a{
    position:relative;
    text-decoration:none;
}

.right ul li a:after{
    content: '';
      position:absolute;
      bottom:0;
      left: 30%;
      right: 30%;
      background:black;
    height:1px;
}

Answer 6

您也可以使用线性背景： DEMO 或 DEMO 2

CSS demo 1

a {
  margin:1em;
  padding-bottom:0.2em;
  background:linear-gradient(
    to left,
  transparent 33%, 
    #EE7972 33%, 
    #EE7972 66%, 
    transparent 66%
  )
    bottom no-repeat;
  background-size: 100% 3px;
}

CSS demo 2

a {
  margin:1em;
  padding-bottom:0.2em;
  background:linear-gradient(
    to left, 
    #EE7972 , 
    #EE7972 
  )
    bottom no-repeat;
  background-size: 1em 3px;
}

具有此边框的可能动画： border animated

较小的下划线效果

6 个答案: