Question

当我看到这个很酷的link underline on wired.com时，我正在浏览网页。我想知道这是怎么做到的。我尝试在按钮上添加边框但是没有这样做。你有什么建议吗？

Answer 1

您可以右键单击其网站中的链接，然后从菜单中选择“检查元素”以查看其样式。覆盖标准的“a”标签样式并添加自己的：

.link-underline a {
border-bottom: 3px solid #b4e7f8;
box-shadow: inset 0 -5px 0 #b4e7f8;
color: inherit;
-webkit-transition: background .15s cubic-bezier(.33,.66,.66,1);
transition: background .15s cubic-bezier(.33,.66,.66,1);
}

a {
-webkit-transition: color .15s cubic-bezier(.33,.66,.66,1);
transition: color .15s cubic-bezier(.33,.66,.66,1);
color: inherit;
text-decoration: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}

Answer 2

你可以这样做：

a
    {
    border-bottom: 2px solid blue;
    box-shadow: inset 0 -2px 0 blue;
    }

要使inset更大，只需将-2px缩小

即可

要使border-bottom更大，请将2px放大

如果您感到困惑，请按以下文档填写：

box-shadow：www.w3schools.com/cssref/css3_pr_box-shadow.asp

border：www.w3schools.com/css/css_border.asp

Answer 3

您可以执行以下操作：http://jsfiddle.net/kjtz5oeh/

   <ul>
        <li>
        <span><a href="#">hello</a></span>
        </li>  
    </ul>

    li {
        text-decoration:none;
        position:relative;
    }

    ul {
        list-style-type: none;
    }

    a {

        text-decoration:none;
        color:red;

    }

    span {
       position:absolute;
       border-bottom: 3px solid rgba(0,0,0,.4);
       height: 12px;

    }

Answer 4

他们使用box-shadow和border-bottom来强调链接，像这样：

<html>

<head>
<style>
a{
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    color: inherit;
    text-decoration:none
}
a:hover{
    background-color: #b4e7f8;
}
</style>
</head>

    <a href="#"> The link </a>

<body>

</body>
</html>

如果您使用的是chrome，则可以右键单击网站中的链接，然后单击inspect元素以查看元素的css属性。

使链接下划线更高并靠近文本

4 个答案: