CSS：内容不显示

Question

在this site上，如果我检查“我们做什么”，我会看到HTML代码：

<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>

使用CSS代码：

.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
    background: none;
    content: '»';
    color: #622C82;
}

我看不出为什么 content: '»' 无法显示。 CSS元素有宽度和颜色。

缺少的是下拉指示器（由下面屏幕截图中的绿色箭头表示）

帮助表示赞赏。

Answer 1

正如我在您的代码选择器.menu li a .sf-sub-indicator中看到的那样，.menu li li a .sf-sub-indicator，.menu li li li a .sf-sub-indicator看起来几乎相等。

无论如何，如果你想要实现content属性，最好写一些类似的东西：

.sf-sub-indicator::after {
    background: none;
    content: '»';
    color: #622C82;
}

http://imgur.com/a/hw1kb

Answer 2

我想你应该看看这个课程

.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
    background: url(images/arrow-down.png) no-repeat;
    height: 16px;
    position: absolute;
    right: 5px;
    text-indent: -9999px;
    top: 13px;
    width: 16px;
}

text-indent 属性会导致＆gt;＆gt;擅离职守。删除它，你有点设置。您可能需要切换其他类。

至于下拉指标，它们非常存在，只需删除background:none

即可

在该注释中，content属性通常设置为::before和::after伪元素。请查看this mdn link。

Answer 3

为此范围设置背景图像。 再次检查：

.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}