如何在与文本内联的 :after 元素上设置“内容”答案

【问题标题】：How to set "content" on an :after element inline with the text如何在与文本内联的 :after 元素上设置“内容”
【发布时间】：2014-07-21 20:01:33
【问题描述】：

我的菜单中有一个 li-tag：

nav ul li ul.firstmenu li.secondtothree{
float: none;
border-bottom: 1px solid #DCDCDA;
padding:3px;
text-transform:none;
}

然后我想在menupoints之后添加“>”，使其看起来像“Home>”或“Article>”。

这是我的:after:

nav ul li ul.firstmenu li.secondtothree:after{
    content: ">";
    font-size: 15px;
    text-align: right;
    display: inline-block;
    width:100%;
    right:0px;
}

但是“>”总是在下一行。可以直接在menupoint后面的那一行设置吗？

【问题讨论】：

好像是因为width:100%，你应该设置margin在正文和:after的内容之间放置一些空格。
设置margin=0很遗憾没有效果
一般不需要width:100%，然后你可能需要margin在正文和内容之间放置一些空格，否则它们会彼此靠近，因此看起来不好.我并不是说您必须使用margin 来解决您的问题，只是需要让它看起来更好看。

标签： html css pseudo-element css-content

【解决方案1】：

默认情况下，生成的内容已经内嵌。您不需要任何这些属性：

text-align: right;
display: inline-block;
width:100%;
right:0px;

【讨论】：

你有什么暗示我可以做些什么来让“内容”在它应该在的地方吗？
@Zwen2012：“它应该在哪里”是什么意思？由于您使用的是:after，因此内容应该直接放在文本之后 - 这正是它应该放在的位置（一旦您删除了所有不必要的属性）。
它在下一行！像这样-> "Home
>" 但它应该是 "Home >"