CODEWITHSUNDEEP
htmlcss
Suika
Suika

Reputation: 660

css- length of border bottom

I have a link that's styled with

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

And looks like this:

enter image description here

But I need to resize the length of the border like this:

enter image description here

Any ideas on how I can do this? Thanks

Upvotes: 0

Views: 3990

Answers (5)

Sumathi J
Sumathi J

Reputation: 200

Here is my solution: Try to test this in the fiddle

hr {
        border-bottom-style: solid;
        border-bottom-color: #96d9f3;
        border-bottom-width: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: inline-block;
        width:20em; 
        overflow:visible;
    }

Html:

<hr />

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46629

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

Upvotes: 2

Bunyomayn
Bunyomayn

Reputation: 34

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>

Upvotes: 0

Ahs N
Ahs N

Reputation: 8386

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

Upvotes: 3

Ankit Agarwal
Ankit Agarwal

Reputation: 1358

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>

Upvotes: 2

Related Questions