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 { 
    background: url(images/arrow-down.png) no-repeat; 
    height: 16px; 
    position: absolute; 
    right: 5px; 
    text-indent: -9999px; 
    top: 13px; 
    width: 16px; 
} 

text-indent свойство заставляет >> идти AWOL. Удалите это и вы kinda комплект. Возможно, вам придется переключать другие классы.

Что касается ниспадающих показателей, они очень присутствует, просто удалите background:none

На этой ноте, content свойства обычно устанавливается в ::before и ::after pseudoelement. Посмотрите на this mdn link.

Answer 2

Как я вижу в ваших кодовых селекторах .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 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; 
}