CSS :: after选择器包装并移动菜单中的文本

Question

最新的浏览器（Chrome，Safari，IE）发生了一些变化，我无法弄清楚为什么现在看起来很糟糕。我正在谈论的网站是here（“写作”菜单），我无法为这个问题建立一个最小化的小提琴（对不起）。

我有一个标准的基于CSS的菜单，由无序的嵌套列表构建，在鼠标悬停时显示/隐藏。对于那些有另一个菜单的子菜单，我使用自动放置的“＆gt;”字符表示。这是代码：

ul.menu li.arrow > a::after {
  content: ">";
  float: right;
  padding-left: 1em;
}

因此，对于那些具有其他子菜单的<li>元素（即嵌套的<ul>），我想自动添加“＆gt;”右对齐。直到最近才开始工作。但是，对于一些最新的浏览器更新，它似乎是“＆gt;”不再扩展<ul>的宽度，而是将其包裹到下一行。

我试图以某种方式扩大<ul>（它当前设置为width:auto），但这没有帮助;将列表项中的<li>或<a>设置为white-space:nowrap也无济于事。但是，我注意到当我删除float然后全部“＆gt;”在那里，只是没有很好地与右侧对齐。

我该如何解决这个问题？

Answer 1

尝试使用:before代替:after：

ul.menu li.arrow > a:before {
    content: ">";
    float: right;
    padding-left: 1em;
}

问题是浮动元素只会影响后面的元素，而不会影响以前的元素。

但如果您想在>和文本之间进行一些分隔，请使用

ul.menu li.arrow:before {
    content: ">";
    float: right;
}
ul.menu li.arrow > a {
    padding-right: 1em;
}