css content image placement - html

Question

why doesn't this work ??
CSS
.iconM-display {
content : url('../images/mthc/companyoverview-icon.png');
}
HTML... OF THE ENTIRE MENU
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<a href="index.html">
<h2 class="iconM iconM-world text-center">HOME</h2>
</a>
<ul>
<li class="iconM-display">
<a class="iconM-display" href="#">What is Music Therapy?</a>
<div class="mp-level">
<h2 ">What is Music Therapy?</h2>
<a class="mp-back" href="#">back</a>
<ul>
</ul>
</div>
</li>
<li class="iconM iconM;arrow-left">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who Benefits?
<div class="mp-level">
<h2>Who Benefits?</h2>
back
<ul>
<li>Autism</li>
<li>PMLD</li>
<li>Dementia</li>
<li>Mental Health</li>
<li>SEN</li>
</ul>
</div>
</li>
<li class="iconM iconM">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Vignettes/Media
<div class="mp-level">
<h2>Vignettes/Media</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Zak</li>
<li>Geoff</li>
<li>Jill</li>
<li>Simon</li>
</ul>
</div>
</li>
<li class="iconM iconM;arrow-left">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who are Musability?
<div class="mp-level">
<h2>Who are Musability?</h2>
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">back
<ul>
<li>History</li>
<li>Mission</li>
<li>Local Links</li>
<li>Supporting Merseyside</li>
</ul>
</div>
</li>
<li class="iconM iconM">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Workshops
<div class="mp-level">
<h2><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Workshops</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Schools</li>
<li>Councils</li>
<li>Healthcare Professionals</li>
<li>Social Worker profession</li>
</ul>
</div>
</li>
<li><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Referrals/Contacts</li>
<li><img src="images/mthc/speechbubbles-icon.png" height="20px" width="20px" hspace="10">Testimonials</li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
the question refers to the first li where I have defined iconM-display as per the css ... very strange I am obviously missing something basic no doubt any advice much appreciated.

Answer 1

I only just noticed. But you are trying to assign {content:""} on a non-pseudo selector.
https://css-tricks.com/css-content/
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.

Answer 2

you basically have to have either ::before or ::after once you have typed content.... worked perfectly for me