The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

block link border problem

  • # August 7, 2010 at 7:15 pm

    Hello everyone,

    I am trying to style my links like what you can see here:

    So of course it should be very simple, my links are displayed as blocks and I should use the border-bottom to do that.

    However my problem is that, unlike in the example, my link blocks all have the same width, 125px, which means that instead of having the bottom border underlining just the text, it is actually much longer which is not the desired effect. Here is a picture.


    So can anyone help me keep the same width for my link blocks but still have the thick border only under the text of the links just like in the example?

    Many thanks.

    # August 7, 2010 at 7:33 pm

    Do you have a link?

    # August 7, 2010 at 7:46 pm

    This reply has been reported for inappropriate content.

    Basically in order to do that you can’t make the anchor display block. It has to be inline. I see what your trying to do though. There has to be some way to acomplish that while keeping the anchor display block. I’ll think on it.

    # August 7, 2010 at 7:50 pm

    This reply has been reported for inappropriate content.

    Ok it’s simple. Just wrap the anchor text in a span and say… a:hover span {text-decoration:underline}

    # August 8, 2010 at 12:09 am

    Hi again, thank you so much, you are a genius.

    I was actually trying something like that but with div instead of span and around the link itself instead of the link’s text and it didn’t work, I just couldn’t get the alignment right.

    Once again thanks a million.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed