Grow your CSS skills. Land your dream job.

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: http://www.brightcorner.com/Default.aspx

    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.

    [attachment=0]link-hover.jpg[/attachment]

    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

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".