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

Posted 2023-03-05

【中文标题】将伪 :after 元素放置在列表项的右侧

【英文标题】：Position a pseudo :after element to the right of a list item

【发布时间】：2017-01-22 21:23:21

【问题描述】：

我正在尝试将伪 :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 像素并且元素将在文本中。例如：

无论长度如何，我都需要元素位于文本右侧 30px 处。所以它看起来像：

这里是 JSFiddle 链接： JSFiddle

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

任何帮助将不胜感激！

谢谢

【参考方案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>

注意事项：

建立弹性容器（块级；占用全宽） Horizontally center child elements。 锚点/菜单项的水平边距为 30 像素 右侧伪元素垂直居中，始终位于菜单项右侧 30 像素（与文本长度无关）。 在左侧添加了第二个伪元素以保持平衡。这使菜单项在容器中居中。它被visibility: hidden 隐藏。 (more info)

【讨论】：

感谢先生您写得很好。这似乎工作得很好，但戴夫在你之前回答了一点，他的回答更简单一些，效果也很好。我给了他接受的答案，所以我不能给你接受的答案。不过，我确实给了你一个赞成票。再次感谢您的工作

【参考方案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 更改为 inline-block 而不是块，这意味着块应该包裹文本，然后将 :after 元素更改为向右填充 30px。

这就是你想要的吗？ https://jsfiddle.net/tvfudkgt/1/

【讨论】：

是的，非常接近！你的代码引导我找到我正在寻找的答案。唯一的问题是，将其更改为内联块将文本推到左侧而不是居中。我能够做一些 css 来使其居中，并且您的 padding left 想法非常有效。谢谢。将此添加到#main-menu-1 li a，我会接受您的回答！宽度：100%；边距：0 自动；