将伪元素 :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像素，以使元素向右移动30像素。它可以工作，但我可以预见一个问题，即如果菜单项有很多文本，它将超过150像素，元素将位于文本中。例如：

我需要元素在文本右侧30像素，无论文本长度如何。因此它会看起来像这样：

这是JSFiddle链接： JSFiddle

请注意，我已经删除了许多不影响此问题功能的不必要样式（颜色、字体等）。

任何帮助将不胜感激！

谢谢

- cup_of

Answer 1

#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. 水平居中子元素。
3. 锚点/菜单项具有30像素的水平边距
4. 右侧伪元素是垂直居中的，并且始终在菜单项的右侧30像素处（不管文本长度如何）。
5. 添加第二个伪元素在左侧以保持平衡。这使得菜单项在容器中居中。它用visibility: hidden来隐藏。（更多信息）

- Michael Benjamin

---

谢谢你写的答案。看起来这个方法完美解决了问题，但是 Dave 的回答比你简单，并且也可以解决问题。我已经接受了他的回答，所以无法将接受的答案给予你。但我已经为你点赞了。再次感谢你的回答。 - cup_of

Answer 2

#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 的样式从块级元素改为行内块级元素，这意味着块应该包裹文本，然后将 :after 元素的右侧填充设置为 30px。

您是否需要这样的效果？ https://jsfiddle.net/tvfudkgt/1/

- dave

---

非常接近！你的代码引导我找到了我想要的答案。唯一的问题是，将它更改为内联块会将文本推到左侧而不是居中。我能够使用一些CSS将其居中，而且你关于左边缘填充的想法完美地解决了问题。谢谢。将此添加到＃main-menu-1 li a中，我将接受你的答案！宽度：100％； 边距：0自动； - cup_of