Adding a Tab between a Menu Item and the :after-inserted content

  • Author
    Posts
  • #1590268

    Self-explanitory, but for your sake, I’ll put the CSS I used up:

    ul#menu-main-menu li ul.sub-menu a:hover:after {
    	content:" —>";
    }

    I want that to help me do this:

    Menu item (<tab here)—>

    The blog I need help with is michaelbishop852.wordpress.com.

    #1590374

    Hi there, I see you have accomplished this with the following CSS. Nice Job!

    ul#menu-main-menu li ul.sub-menu a:hover:after {
    	content:"➔";
    	font-size: 13px;
    	margin-left: 36px;
    }
    #1590483

    Yes, but not exactly.
    I wanted the arrow to appear on the edge of the menu button, regardless of how long the menu button text is. When I tried last time, with margin-left:;being longer than the one I used, it made the button taller because it didn’t let the arrow overflow out of the button.

    #1590511

    Hi, give the following a try. It “floats” the added arrow content to the far right of the submenu items.

    ul#menu-main-menu li ul.sub-menu a:hover:after {
        content: "➔";
        font-size: 13px;
        float: right;
    }
    #1590514

    Thanks. :)

The topic ‘Adding a Tab between a Menu Item and the :after-inserted content’ is closed to new replies.