CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1775

CSS: content not displaying

On this site, if I inspect "What We Do", I see the HTML code:

<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>

with CSS code:

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

I can't see why the content: '&raquo;' does not display. The CSS element has a width and a colour.

What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)

enter image description here

Help appreciated.

Upvotes: 0

Views: 1701

Answers (3)

Arashtad
Arashtad

Reputation: 254

Background image is set for this span. Inspect it again:

.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;
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.

Anyway if you want implement content attribute it's better to write something like: 

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

https://i.sstatic.net/L55HS.jpg

Upvotes: 1

semuzaboi
semuzaboi

Reputation: 5172

I guess you should have a look at this class

.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;
}

the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.

As for the drop down indicators, they are very much present, just remove the background:none

On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .

Upvotes: 1

Related Questions