- This topic is empty.
-
AuthorPosts
-
June 2, 2013 at 8:23 am #45159CodeGraphicsParticipant
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?
June 2, 2013 at 8:29 am #137322AlenParticipantyou mean like:
.someThing {
border-bottom:100px solid #ccc;
}June 2, 2013 at 8:29 am #137323CrocoDillonParticipantOnly 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;
}June 2, 2013 at 9:55 am #137330CodeGraphicsParticipant@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 “”)
June 2, 2013 at 10:02 am #137331Paulie_DMemberPut the border on the `li`?
June 2, 2013 at 10:08 am #137332CodeGraphicsParticipantIt didnt work sir. Check [this.](http://codepen.io/alex13/pen/arhzd “”)
June 2, 2013 at 10:15 am #137337Paulie_DMemberYou aren’t making yourself clear then.
Do you want it longer, wider or taller?
June 2, 2013 at 10:27 am #137335CodeGraphicsParticipantlonger.
June 2, 2013 at 10:28 am #137336Paulie_DMemberThen the example I gave is fine…the border is longer than the text.
June 2, 2013 at 10:38 am #137338CodeGraphicsParticipantNo. 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.June 2, 2013 at 10:38 am #137339CodeGraphicsParticipantThen when you hover on ‘contact’ itself, it’s bottom border will stretch back all the way to home.
June 2, 2013 at 10:41 am #137340wolfcry911Participantedit// 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.
June 2, 2013 at 10:41 am #137341Paulie_DMemberNot sure what experience that would give to the user, confusing at best.
However, I think you would need javascript to do that.
June 2, 2013 at 10:50 am #137342wolfcry911ParticipantJune 2, 2013 at 10:55 am #137343Paulie_DMember>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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.