Question

我想创建一个如下所示的水平菜单导航：

{image1} ITEM1 [separator1] {image2} ITEM2 [separator2]等。

我有一个限制：HTML应该完好无损。只有带有以下标记的CSS才能实现这一点：http://jsfiddle.net/Mrt4V/

现在，我尝试了很多变化，结果是：before和：after伪元素，但现在菜单显示如下：

{image1} [separator1] ITEM1 {image2} [separator2] ITEM2等。

我认为这可能是一个瓶颈：

li a:after {
  content: '';
  float: left;
  zoom: 1;
  margin: 0 0 0 2px;
  width: 4px;
  height: 16px;
  background: url('http://static-caselogic-com.r.worldssl.net/images/CaseLogic/Misc/CategoryMenuSeparator.png') 0 0 no-repeat;
}

我做错了什么？

Answer 1

对于这种情况，定位是关键部分。

将position:relative添加到<a>代码并将position:absolute添加到:before＆amp; : after。

原因是:before＆amp; :after相对于<a>代码。

我刷新了CSS中的更改以获得所描述的结果。

以下是工作小提琴：

http://jsfiddle.net/MasoomS/gwxndwka/

Answer 2

只需设置：display:inline-block之后并删除float:left

这是示例http://jsfiddle.net/Mrt4V/1/

我可以在选择器上使用两个CSS伪元素：此示例之前和之后？

2 个答案: