1

我有一个简单的菜单：

<ul id="menu">
    <li>A</li>
    <li class="current">B</li>
    <li>C</li>
</ul>

我想<--在当前项目旁边放置一个大图形标记 ( )：

* A
* B <--
* C

我怎样才能只使用 CSS 来做到这一点，而不改变标记？我通常的技巧是将图像设置为项目的背景，但此图像非常大，因此它会被项目的边界框裁剪。我强调标记不是字符串，而是图像。

4

3 回答 3

3

你可以这样做：

li.current:after {
   content: "<--";
   display: inline-block;
}

也许给一些左边距，例如：http: //jsbin.com/aluziv/1/

如果元素本身是图像，只需将其加载为background-image

li.current:after {
   content: "";
   background: url(...) top left no-repeat;
   width: ...px;
   height: ...px;
   display: inline-block;
}
于 2013-04-23T11:51:48.707 回答
2

使用 CSS:before或 :after选择器。例如：

.current:after {
    content:'<--';
}

jsFiddle 示例：http: //jsfiddle.net/hr3Rv/

您可以根据需要向块中添加其他样式:after（您可以使用它执行的操作有一点限制，但对于您的要求，它是完全正确的）。

如果标记是图像，您可以像这样引用它：

.current:after {
    content:url('image.png');
}

另一种选择是使用图像字体（例如，FontAwesome字体）。在 CSS 的其他地方包含字体，并从字体中引用适当的字符：

.current:after {
    font-family: FontAwesome;
    content: "\f100"; //font-awesome's left double-arrow icon
}

（有关更多说明，请参阅 FontAwesome 网站）

于 2013-04-23T11:51:46.930 回答
2

试试 CSS:after选择器。以下将产生您的结果（在当前元素后写“<--”）：

li.current:after {
    content: "<--";
}

您还可以插入图像：

li.current:after {
    content: url('arrow.png');
}
于 2013-04-23T11:52:47.293 回答