Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal Center align on :after css triangle

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #44365

    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

    #133205
    wolfcry911
    Participant

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

    #133206

    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

    #133207

    And there you go, thank you very much wolfcry911

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.