CSS: content not displaying

Question

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: '»' 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)

Help appreciated.

content is an attribute for pseudoelements ::after and ::before, not for plain css selectors — Banzay
– Banzay, Commented Jan 16, 2017 at 6:02

semuzaboi · Accepted Answer · 2017-01-16 06:20:51Z

1

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 .

answered Jan 16, 2017 at 6:20

semuzaboi

5,2025 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

Thanks. I ended up replacing the default dropdown arrow that had been hidden with

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

Banzay · Accepted Answer · 2017-01-16 06:22:15Z

1

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

edited Jan 16, 2017 at 6:22

answered Jan 16, 2017 at 6:05

Banzay

9,4802 gold badges32 silver badges46 bronze badges

2 Comments

Steve Over a year ago

Thanks Banzay. I've made that change, and the content appears in the HTML, but it does not display visually.

Banzay Over a year ago

this works:

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

Arashtad · Accepted Answer · 2017-01-16 06:41:35Z

0

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

answered Jan 16, 2017 at 6:41

Arashtad

2541 silver badge12 bronze badges

Collectives™ on Stack Overflow

CSS: content not displaying

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related