css- length of border bottom

Question

I have a link that\'s styled with

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

And looks like this:

But I need to resize the

Answer 1

If you can use the ::after pseudo-element, you can give styles to that one.

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>

Or, if you can't use ::after, maybe something like this.

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>

(This one is more fussy though; the position of the underline depends on the font size and you may have to fiddle around a bit to get it in the right position.)

Answer 2

There may be more than one way. I think;

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

Answer 3

This is how I would do it:

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 4

It is better to use text-decoration in your situation Like this

.underLineText:hover{
     text-decoration:underline
}

And HTML like this

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