Css 在灵活导航上定位背景图像

我在wordpress上的活动菜单项上定位图像时遇到了一个棘手的问题。html是由wordpress发布的，因此我无法更改呈现给我的类。我已经设法创建了一个非常灵活的菜单，但我似乎无法控制此图像的位置

这就是我想要达到的目标>

下面是HTML，这里是fiddle>

HTML:

我在li.current_page_项中尝试了一个：after伪元素作为一个类，但没有达到目的。但在如何做到这一点上，任何帮助都将一如既往地受到感谢：）

---

R

您可以使用

：after

，但您需要将其与绝对定位相结合。您还需要为该定位项目指定一个大小

nav#navigation ul#main-menu a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 8px;
    margin: 0 9px;
    position:relative;   <--- you need this 
}

li.current_page_item a:after {
    background: url(http://richardfoggin.co.uk/pinkfloyd/wp-content/themes/svbtle/images/menu-bg.png);
    border-bottom: solid 1px #fff;      
    position:absolute;
    content: "";
    top:16px;
    left:30px;
    width:18px;
    height:20px;   
}

nav#导航ul#主菜单a{
显示：块；
文字装饰：无；
颜色：黑色；
填充：8px；
利润率：0.9px；
位置：相对的；啊，因为我没有给它一个尺寸，所以没有什么位置？无论哪种方式都很好！！非常感谢！！啊，虫子现在没有在链接下居中..多么残酷的世界啊！
nav#navigation {
    position:absolute; 
    top:0; width:100%; 
    padding:20px 0 0; 
    border-bottom:1px solid #dedede;
    background: #FFFFFF;
}

nav#navigation ul#main-menu {
    list-style-type: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

nav#navigation ul#main-menu li{
 display: inline-block;
}

nav#navigation ul#main-menu a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 8px;
    margin: 0 9px;
}


li.current_page_item a {
    background: url(http://richardfoggin.co.uk/pinkfloyd/wp-content/themes/svbtle/images/menu-bg.png) no-repeat 50% 100%;
    border-bottom: solid 1px #fff;
}

nav#navigation ul#main-menu a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 8px;
    margin: 0 9px;
    position:relative;   <--- you need this 
}

li.current_page_item a:after {
    background: url(http://richardfoggin.co.uk/pinkfloyd/wp-content/themes/svbtle/images/menu-bg.png);
    border-bottom: solid 1px #fff;      
    position:absolute;
    content: "";
    top:16px;
    left:30px;
    width:18px;
    height:20px;   
}