Grow your CSS skills. Land your dream job.

Horizontal Center align on :after css triangle

  • # April 25, 2013 at 8:09 pm

    I’m having an issue where the currently active navigation item gets a little triangle that appears underneath it to denote what page you are on. The triangle is showing up great, but I can’t figure out how to center align it when I need the container element it’s attached to be variable width.

    I know how to do it with JS, I’m wondering if there is a way to do it with css.

    CodePen

    # April 25, 2013 at 8:13 pm

    add margin-left: -20px to the :after pseudo element

    # April 25, 2013 at 8:14 pm

    Literally as I was writing it I came up with a possible solution by using both :before and :after to create half the triangle. Still would like to be able to do it with just the :after so I can use :before for something else if possible.

    Codepen: Forked with both :before and :after

    # April 25, 2013 at 8:15 pm

    And there you go, thank you very much wolfcry911

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

You must be logged in to reply to this topic.

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