为什么 a:before 加下划线答案

【问题标题】：Why a:before gets underlined为什么 a:before 加下划线
【发布时间】：2014-09-28 09:24:33
【问题描述】：

如何去掉“-”下面的下划线？我只希望文本在悬停时加下划线，而不是“-”

非常感谢！

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

【问题讨论】：

你尝试设置 text-decoration: none;为：之前？
因为 :before 伪元素是在a 的内容“之前”添加的，而不是在a 标签之前
How to remove only underline from a:before的可能重复
@DoodlebunchYup 我试过：之前。它不起作用。
因为即使它被称为before，它实际上也被插入到a 中，因此继承了父级的设置。从 MDN - ::before 创建一个伪元素，它是匹配元素的第一个子元素

标签： css list html-lists underline

【解决方案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

【讨论】：

display:inline-block 完成了这项工作。伟大的。谢谢！

【解决方案2】：

:before 选择器的content 计入a-tag，因为它在元素内创建了一个伪元素。

在定义中添加display:inline-block;来解决这个问题。

【讨论】：