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

michaelbishop852 · Member · Jan 7, 2014 at 11:59 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · Jan 7, 2014 at 5:58 pm
Copy link
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;
}
```
michaelbishop852 · Member · Jan 8, 2014 at 11:34 pm
Copy link
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.
thesacredpath · Member · Jan 10, 2014 at 5:23 pm
Copy link
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;
}
```
michaelbishop852 · Member · Jan 11, 2014 at 2:23 am
Copy link
Thanks. :)

No items found.