Learn how to a build a cloud-first strategyRegister Now


Change a border length with jquery or css

Posted on 2012-09-16
Medium Priority
Last Modified: 2012-10-24

I have a hover effect on a list item that places a border on the top.
I want this border to remain a fixed size even though the list item maybe bigger/smaller than the border

Is it possible to change a border length using jquery or css?

Question by:coolispaul
  • 4
  • 2
LVL 25

Accepted Solution

Kyle Hamilton earned 1500 total points
ID: 38403636
there are things you can do achieve that "effect".

If the border is on the text, then it will be the size of the text. You can specify the width of the text and give it a display block, and that will cause the border stay the specified width. But the text will wrap if it exceeds the width.

But I don't think that's what you're looking for. So you'll have to apply the "border" (it may end up being something other than a border) to something else that stays a constant width. Like I said, there are many different ways of achieving that.

If you can post a link to your page, we can figure out the most efficient way to do what you are looking for.

Author Comment

ID: 38403678
heres a page:

if you hover over the icons under "compare the range" you will see the hover effect.
I want the border to be about 80pixels long for each rather than varying lengths

LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38403727
do you mean the icons under "REAM COMPLETE THE LOOK"?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38403737
My suggestion would be to make the icons into sprites, so that the secondary icon has the green overline built into it. Then they will be exactly as you want them.

And in the css, you change the position of the sprite on hover, instead of adding the border.

Let me know if you need more explanation...


Author Comment

ID: 38403742
I see, sprites being the images  joined together and css showing the appropriate one?
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38403751
yep. pixel perfection :)

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question