Question

为什么这不起作用？

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 ...非常奇怪我显然遗漏了一些基本无疑的建议。

Answer 1

我只是注意到了。但是您试图在非伪选择器上分配{content:""}。

https://css-tricks.com/css-content/

CSS有一个名为content的属性。它只能与伪一起使用元素：之后和：之前。它被写成伪选择器（使用冒号），但它被称为伪元素，因为它不是实际上选择页面上存在但添加的任何内容页面上的新内容。

Answer 2

一旦你输入了内容，你基本上必须要有:: before或::之后才能完美地为我工作

css内容图片放置

2 个答案: