较小的下划线效果 [英] Smaller underline effect

问题描述

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

I came across interesting underline effect that looks like this:

这很简单，但是我不能想办法实现它，而不在标记中使用额外的html元素，语义。我想知道是否可能实现它使用css和没有任何额外的元素。效果基本上是一个下划线/底部边框，小于元素并居中在下面。

It's simple, but I can't think of a way to achieve it without using additional html elements in markup, that will be not semantic. I am wondering if it is possible to achieve it using css and without having any additional elements. Effect is essentially an underline / bottom border that is smaller than element and centered under it.

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

Here is my markup for navigation, where this effect will be used on current page links.

            <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>

推荐答案

试试这个 - 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;
}

这篇关于较小的下划线效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！