为什么a：在得到下划线之前

Question

如何删除下划线“ - ”？我只希望文本在悬停时加下划线而不是“ - ”

-- DEMO --

非常感谢！

HTML

<ul class="menu">
    <li>
      <a href="#">Commercial Property Management</a>
         <ul>
            <li>
               <a href="#">Industrial</a>
             </li>
              <li>
                 <a href="#">Office</a>
               </li>
                  <li>
                    <a href="#">Retail</a>
                   </li>
              <li>
                        <a href="#">Shopping Centres</a>
                    </li>
                    </ul>
                     </li>
                    <li>
                        <a href="#">Mixed-Use Residential Property Management</a>
                    </li>
                </ul>

CSS

ul.menu li li a:before {
    content: "-";
    margin-right: 8px;
}

Answer 1

  

4年后修改：此答案几乎是https://stackoverflow.com/a/8820459/3285730的低质量副本。我建议去那里并得到一个实际的解释。

尝试给它display:inline-block;：

ul.menu li li a:before {
    content: "-";
    margin-right: 8px;
    display:inline-block;
}

JSFiddle Demo

Answer 2

content选择器的

:before计入a - 标记，因为它会在元素中创建一个伪元素。

将display:inline-block;添加到定义中以解决此问题。