我試圖在菜單列表項的右側放置一個僞元素:after
30像素。在列表項右側放置僞元素
無論項目文本的長度是多少,我都希望元素的右邊爲30px。
我已將下面的代碼剝離到我認爲此問題需要的最低限度。
請注意,這是一個手機菜單。菜單和a
標籤鏈接擴展了瀏覽器(電話)的全部寬度。
#menu-main-menu-1 li {
position: relative;
list-style: none;
}
#menu-main-menu-1 li a {
padding: 18px 0;
display: block;
text-align: center;
}
#menu-main-menu-1 a:after {
content: "\25CF";
position: absolute;
right: 0;
left: 150px;
top: 20px;
}
<ul id="menu-main-menu-1">
<li class="menu-item">
<a href="#">Menu Item</a>
</li>
<li class="menu-item">
<a href="#">Long Menu Item Text</a>
</li>
</ul>
上面的代碼產生以下結果:
正如你所看到的,我需要把它定位到左邊150像素,以獲得元素去該項目右側30px。它可以工作,但是我可以預見一個問題,如果菜單項有很多文本,它將超過150px,並且元素將在文本中。例如:
我需要的元素被30PX到文本的右側無論長度。因此,它看起來像:
這裏是的jsfiddle鏈接: JSFiddle
請注意,我已經剝奪了許多不影響這個問題的功能不必要的樣式(顏色,字體等)
任何幫助將不勝感激!
由於
是非常接近!你的代碼引導我尋找我正在尋找的答案。唯一的問題是,將其更改爲內聯塊將文本推到左側而不是居中。我能夠做一些CSS來集中它,你的填充左邊的想法完美地工作。謝謝。將此添加到#main-menu-1 li a,我將接受您的答案! 寬度:100%; margin:0 auto; –