css-边界底部的长度

Question

我有一个用

设置样式的链接

a:hover {
    border-bottom: 3px solid #fff;
}

看起来像这样：

但我需要像这样调整边框的长度：

关于我如何做到这一点的任何想法？感谢

Answer 1

我就是这样做的：

a:hover:after {
    content: ' ';
    text-decoration: none;
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    margin-left: 25%;
    border-bottom: solid 3px black;
}

Here is the JSFiddle demo

Answer 2

如果您可以使用::after伪元素，则可以为该元素指定样式。

body {
  background-color:#800;
}
#contact {
  color:white;
  position:relative;
  text-decoration:none;
}
#contact:hover::after {
  position:absolute;
  display:block; content:'';
  left:25%; right:25%; bottom:0;
  border-bottom:3px solid;
}

<a id="contact" href="#">Contact Us</a>

或者，如果您无法使用::after，可能就是这样。

body {
  background-color:#800
}
#contact {
  color:white;
  text-decoration:none;
  display:inline-block;
  position:relative; left:1em;
  width:3em; overflow:visible;
  text-indent: -1em;
  white-space:nowrap;
}
#contact:hover {
  border-bottom:3px solid;
}

<a id="contact" href="#">Contact Us</a>

（这个更挑剔;下划线的位置取决于字体大小，你可能需要摆弄一下才能使它处于正确的位置。）

Answer 3

最好在你的情况下使用文字装饰 喜欢这个

.underLineText:hover{
     text-decoration:underline
}

像这样的HTML

<p>Co<span class="underLineText">ntact</span>&nbsp;Us</p>

Answer 4

可能有多种方式。我想;

<div class="linkDiv">
    <a>Link</a>
    <div class="border"></div>
</div>

<style type="text/css">.border:hover{width:50%;border-bottom:3px solid #fff}</style>