为什么不起作用？
的CSS
.iconM-display {
content : url('../images/mthc/companyoverview-icon.png');
}
HTML ...整个菜单
<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">
<a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who Benefits?</a>
<div class="mp-level">
<h2>Who Benefits?</h2>
<a href="#">back</a>
<ul>
<li><a href="#">Autism</a></li>
<li><a href="#">PMLD</a></li>
<li><a href="#">Dementia</a></li>
<li><a href="#">Mental Health</a></li>
<li><a href="#">SEN</a></li>
</ul>
</div>
</li>
<li class="iconM iconM">
<a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Vignettes/Media</a>
<div class="mp-level">
<h2>Vignettes/Media</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Zak</a></li>
<li><a href="#">Geoff</a></li>
<li><a href="#">Jill</a></li>
<li><a href="#">Simon</a></li>
</ul>
</div>
</li>
<li class="iconM iconM;arrow-left">
<a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who are Musability?</a>
<div class="mp-level">
<h2>Who are Musability?</h2>
<a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">back</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">Local Links</a></li>
<li><a href="#">Supporting Merseyside</a></li>
</ul>
</div>
</li>
<li class="iconM iconM">
<a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Workshops</a>
<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><a href="#">Schools</a></li>
<li><a href="#">Councils</a></li>
<li><a href="#">Healthcare Professionals</a></li>
<li><a href="#">Social Worker profession</a></li>
</ul>
</div>
</li>
<li><a href="#"><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Referrals/Contacts</a></li>
<li><a href="#"><img src="images/mthc/speechbubbles-icon.png" height="20px" width="20px" hspace="10">Testimonials</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
这个问题是关于我根据css定义iconM-display的第一个li ...很奇怪，我显然缺少一些基本的知识，毫无疑问，任何建议都值得赞赏。
最佳答案
我只是注意到而已。但是您正在尝试在非伪选择器上分配{content:""}。
https://css-tricks.com/css-content/
CSS具有一个称为内容的属性。它只能与伪
元素：after和：before。它像伪选择器一样编写
（带有冒号），但它被称为伪元素，因为它不是
实际选择页面上存在的任何内容，然后添加
该页面的新内容。
关于html - CSS内容图片放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30269578/