移动添加了伪元素的内容：之后

Question

thanks in advance for the help! I created a menu with this code:

<div class="img-nav">
        <ul>
            <li>
                <a href="#">places</a>
            </li>
            <li>
                <a href="#">people</a>
            </li>
            <li>
                <a href="#">abstract</a>
            </li>
            <li>
                <a href="#">funny</a>
            </li>
        </ul>
    </div>

I then added a "/" sign after every menu item with:

.img-nav li:after {
    content: " / ";
}

.img-nav li:last-child:after {
    content: " ";
}

The problem is that if I add a margin to my items, the "/" is not centered like this:

ITEM1/  ITEM2/  ITEM3/  ITEM4

How can I reposition or move the "/" to be centered again? Thank you all!

Answer 1

You can add equal margin to your :after psuedo-selector to make it appear equal.

.img-nav li {
    display: inline;
    margin-left:5px;
}

.img-nav li:after {
    content: " / ";
    margin-left: 5px;
}

.img-nav li:last-child:after {
    content: " ";
}

Here is my jsfiddle

I hope this helps.

Answer 2

Use padding on the pseudo-element.

 ul { text-align: center; } .img-nav ul li { display: inline-block; } .img-nav li:after { content: " / "; margin: 0 1em; display: inline-block; } .img-nav li:last-child:after { content: " "; } 

 <div class="img-nav"> <ul> <li> <a href="#">places</a> </li> <li> <a href="#">people</a> </li> <li> <a href="#">abstract</a> </li> <li> <a href="#">funny</a> </li> </ul> </div>