将一个伪:after元素放在列表项的右侧

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>

上面的代码产生以下结果:

正如您所看到的,我需要将其放置在左侧150px处,以使元素在项目的右侧移动30px.它可以工作,但我可以预见一个问题,如果菜单项有很多文本,它将超过150px,元素将在文本中.例如:

无论长度如何,我都需要元素在文本的右边30px.所以它看起来像:

这是JSFiddle链接: JSFiddle

请注意,我已经删除了许多不影响此问题功能的不必要的样式(颜色,字体等)

任何帮助将非常感激!

谢谢

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. 建立flex容器(块级;占全宽)
2. 水平居中儿童元素.
3. 锚点/菜单项具有30px水平边距
4. 右侧伪元素是垂直居中的,并且总是在菜单项右侧30px(无论文本长度如何).
5. 在左侧添加第二个伪元素以获得相等的平衡.这使菜单项保持在容器的中心.它隐藏着visibility: hidden.(更多信息)

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/