I am trying to generate a menu like the following:
There are several items in the menu and the active one has an arrow after it. The menu items are tags like the following code:
<div class="menuCenter">
<div class="linksWrapper">
<a href="#">Home</a>
<a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
<a class="menuCenterLinkLeft" href="#">Sign In</a>
<a class="menuCenterLinkLeft active" href="#">Sign Up</a>
<a class="menuCenterLinkLeft" href="#">Contact</a>
</div>
</div>
I tryied two options: 1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page. 2- Using the :after pseudo element, like this:
.linksWrapper a.active:after
{
content: url("images/arrowImg.png");
position: relative;
left: -40px;
top: 30px;
}
The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that. I can use HTML5 or CSS 3.
Any help?
Try this:
.linksWrapper a.active:after {
content: url("images/arrowImg.png");
position: absolute;
left: 50%;
top: 30px;
margin-left: - <width-of-your-image> / 2; /* negative number!*/
}
sidenote: I avoid putting {
on a newline, since it may have nasty effects in javascript.
The trick is left:50%;
combined with correcting the position by setting it back half width via margin-left
.
See example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With