在列表項右側放置僞元素

Question

我試圖在菜單列表項的右側放置一個僞元素: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

請注意，我已經剝奪了許多不影響這個問題的功能不必要的樣式（顏色，字體等）

任何幫助將不勝感激！

由於

Answer 1

#menu-main-menu-1 li { 
    position: relative; 
    list-style: none; 
} 

#menu-main-menu-1 li a { 
    padding: 18px 0; 
    display: inline-block; 
    text-align: center; 

    // Recommended to recenter text 
    width: 100%; 
    margin: 0 auto; 
} 

#menu-main-menu-1 a:after { 
    content: "\25CF"; 
    padding-left: 30px; 
} 

我改變#menu-main-menu-1 li a爲嵌入塊，而不是塊，這意味着塊應包裹的文字，然後通過30像素改變:after元件墊到右側。

這就是你想要的嗎？ https://jsfiddle.net/tvfudkgt/1/

Answer 2

#menu-main-menu-1 li { 
 
    list-style: none; 
 
} 
 
.menu-item { 
 
    display: flex;    /* 1 */ 
 
    justify-content: center; /* 2 */ 
 
} 
 
.menu-item a { 
 
    margin: 0 30px;   /* 3 */ 
 
    padding: 18px 0; 
 
} 
 
.menu-item::after { 
 
    content: "\25CF"; 
 
    align-self: center;  /* 4 */ 
 
} 
 
.menu-item::before { 
 
    content: "\25CF";   /* 5 */ 
 
    visibility: hidden; 
 
}

<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>

注：

1. 建立柔性容器（塊級;優先全寬）
2. Horizontally center child elements。
3. 錨點/菜單項有30px的水平邊距
4. 右側的僞元素是垂直居中的，並且菜單項的右側總是30px（不管文本長度）。
5. 第二個僞元素添加在左邊以獲得相等的平衡。這使菜單項在容器中居中。它隱藏着visibility: hidden。 （more info）