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

  • Author
  • #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


    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 {
    	font-size: 13px;
    	margin-left: 36px;

    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.


    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;

    Thanks. :)

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