Question

我正在尝试将一个伪:after元素放在菜单列表项右侧30像素处。

无论项目文本的长度如何，我都希望元素在右边30px。

我已将以下代码剥离到我认为此问题所需的最低限度。

请注意，这是一个移动菜单。菜单和a标记链接扩展了浏览器（手机）的整个宽度。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

以上代码产生以下结果：

如您所见，我需要将其放置在左侧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>

注意：

建立flex容器（块级;占全宽）
Horizontally center child elements。
锚点/菜单项具有30px水平边距
右侧伪元素是垂直居中的，并且总是在菜单项右侧30px（无论文本长度如何）。
在左侧添加第二个伪元素以获得相等的平衡。这使菜单项保持在容器的中心。隐藏着visibility: hidden。（more info）

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/

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

2 个答案: