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

我正在尝试定位一个伪：在菜单列表项右侧30个像素之后.

无论项目文本的长度如何,我都希望元素向右移动30px.

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

请注意,这是一个移动菜单.菜单和标签链接扩展了浏览器(手机)的整个宽度.

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

}

• Menu Item

• Long Menu Item Text

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

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

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

这是JSFiddle链接：

JSFiddle

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

任何帮助将非常感激！

谢谢