无法获得 :after 以显示与菜单项文本内联

Question

我试图简单地使用伪选择器 :after 在顶级菜单项旁边添加一个 > 下拉指示符。

这是一个显示两个示例的 JSFiddle，上一个不工作的示例，以及一个精简的版本，它应该如何工作如下：https://jsfiddle.net/z2rwe3wh/3/

HTML 有点乱，它是从 WordPress 中的自定义 walker 类生成的，每个子菜单在项目中都有自定义嵌套布局和样式 - 但是，我的 CSS 中有一些东西阻止了 :after 伪选择器无法正确运行并将 > 标记保持在文本右侧。

这是用于将标记添加到两个菜单的伪选择器（在 JSFiddle 底部的 CSS 中找到）。

nav ul li.master > a:after {
  content: " >";
  width: 10px;
  height: 5px;
}

如果您不介意夏洛克·福尔摩斯的时刻，我们将不胜感激 - 我无法找到它。

Answer 1

这是因为<a>标签中有一个div。默认情况下，Div 为 display: block;，因此这会将您的 :after 元素推到下一行。

将以下内容添加到您的 CSS：.name { display: inline; }

在工作示例中，:after 和文本（不是 div）都在 <a> 内，因此位于同一行。