擬似：after要素をリスト項目の右側に配置

Question

メニュー項目の右側に擬似:after要素を30ピクセル配置しようとしています。

アイテムのテキストの長さにかかわらず、エレメントを右に30ピクセルにします。

私はこの問題に必要と思われる最低限のコードを削除しました。

これはモバイルメニューです。メニューと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を変更し、その後、右に30pxによってパッドに: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. 平衡のために左に2番目の疑似要素が追加されます。これは、メニューアイテムをコンテナの中央に保持します。それはvisibility: hiddenで隠されています。 （more info）