Question

我希望我的div框在div框的右边缘有一个“raquo”（»）位置，但不是超链接的一部分。

我的div框用于超链接，这是我的CSS

.episode-nav .alignright a {
    margin-bottom:7px;
    margin-top:7px;
    width:274px;
    padding:5px 0px;
    background:#2A2A2A;
    text-align:center;
    border:1px solid #1B1B1B;
    float:right;
}

可以做些什么？

Answer 1

如果您尝试创建菜单，则应使用正确的标记是一个列表，例如

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

现在，实际上让»正常工作。有两种方法可以做到这一点。您可以在其中添加span并添加»，并将其放在锚点或列表中，也可以使用CSS :after伪元素生成内容为了你。请注意，第二种方法的浏览器支持较少，可能会引起争议。在这里查看:after伪元素：http://reference.sitepoint.com/css/pseudoelement-after

在这里查看两种方法的演示：http://jsfiddle.net/aQSVp/

请注意您如何使用content属性生成内容。

#after a:after {
    content: '»';
    float: right;
    margin-right: 10px;
}

Answer 2

让自己成为一个raze光栅图像并将其用作背景图像。

Answer 3

我不是100％确定我通过'background-text'了解你想要的东西。如果您只想要一个带有＆gt;＆gt;的链接在前面，你为什么不在你的div中做这个？

<span>&raquo;<a href="...">This is a link</a></span>

可能会将“white-space：nowrap”添加到span的样式中。

Answer 4

我知道这是一个老问题并且已经有了答案，但是这个问题有一个CSS解决方案。

在:before上使用li，可以使用»的十六进制代码\BB。 Demo here.

HTML：

<ul>
    <li>List element 1</li>
    <li>List element 2</li>
    <li>List element 3</li>
    <li>List element 4</li>
</ul>

CSS：

ul
{
    list-style: none;
}

li:before
{
    content: '\BB  ';
}

CSS - Div“background-text”而不是background-image

4 个答案: