html - 为什么在CSS中使用重要代码是错误的做法？

HTML：

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu-primary" class="nav navbar-nav menustyle">
    <li><a href="#">Home</a></li>
  </ul>
</div>

CSS：

.menustyle a:before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  background-color: #fff;
  width: 0%;
}
.nav > li > a:hover .menustyle a:before{
  width: 100%!important;
}

当我使用Bootstrap时，此方法不起作用，但不使用Bootstrap时，则有效。

最佳答案

I have modified you code. If you want hover like this.

    <style type="text/css">
        .menustyle a{
            position: relative;
        }
        .menustyle a:before{
                position: absolute;
                top: -5px;
                left: 0;
                content: "";
                height: 2px;
                background-color: #ff0000;
                width: 0%;
            }
        .menustyle > li > a:hover:before{
            width: 100% !important;
        }
    </style>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-primary" class="nav navbar-nav menustyle">
            <li><a href="#">Home</a></li>
        </ul>
    </div>