Is there a way to give border width?

[CodeGraphics]

Is there a way to give a border width to an element? I want a situation where a border-bottom will be shorter or longer than the element it is applied to. I tried border-width:100px, but it made the border to appear like a box. Is there a better way of doing it?

[Alen]

you mean like:

.someThing {
border-bottom:100px solid #ccc;
}

[CrocoDillon]

Only way is using a (pseudo)element, as `border-width` is the thickness of the border. Something like:

x:after {
content: ”;
display: block;
width: 80%;
height: 10px;
margin: 0 auto;
background: green;
}

[CodeGraphics]

@Crocodillon. Look at what i want to do. i have a link. I want when the link is hover, it will have a bottom border that will be longer than the link text. See [codepen.](http://codepen.io/alex13/pen/HlkFz “”)

[Paulie_D]

Put the border on the `li`?

http://codepen.io/Paulie-D/pen/tCuyc

[CodeGraphics]

It didnt work sir. Check [this.](http://codepen.io/alex13/pen/arhzd “”)

[Paulie_D]

You aren’t making yourself clear then.

Do you want it longer, wider or taller?

[CodeGraphics]

longer.

[Paulie_D]

Then the example I gave is fine…the border is longer than the text.

[CodeGraphics]

No. I want when u hover on ‘home’, it’s bottom border will stretch all the way to ‘contact’.
Then when u hover on ‘about’, starting from about text, it’s border will again stretch to contact. and so on.

[CodeGraphics]

Then when you hover on ‘contact’ itself, it’s bottom border will stretch back all the way to home.

[wolfcry911]

edit// I just saw your new posts. why didn’t you mention that to begin with, rather than have 3 people (if not more) waste time suggesting things you originally asked for but don’t want?

previous post// Dillon’s suggestion is still perfectly valid (as is Paulie’s with a different method); you stated ‘shorter or longer’ and Dillon gave you shorter. Just change the 80% to something greater than 100% if you want it longer.

http://codepen.io/wolfcry911/pen/lsvHA

[Paulie_D]

@CodeGraphics

Not sure what experience that would give to the user, confusing at best.

However, I think you would need javascript to do that.

[wolfcry911]

http://codepen.io/wolfcry911/pen/lsvHA

[Paulie_D]

>Then when u hover on ‘about’, starting from about text, it’s border will again stretch to contact. and so on.

I think @wolfcry911 has gone about as far as css can take it.

To get what you want, I’m not sure CSS is the answer.

However, I re-iterate

>Not sure what experience that would give to the user, confusing at best.

[Author]

Posts