Question

我有一个Bootstrap列表组，我用图标标注了它。我试图从列表组中删除第一个图标。我怎样才能做到这一点？这是我的代码：

<ul class="list-group" id="vacationList">
              <li class="list-group-item text-center" id="vacationListTitle">Our in-home pet care includes the following care treatment:</li>
              <li class="list-group-item">All the love, attention, kissing and scracthing your pet deserves</li>
              <li class="list-group-item">Walk, exercise, playtime or visit</li>
              <li class="list-group-item">Food, treats and fresh water as needed</li>
              <li class="list-group-item">Trash and pet waste removal</li>
              <li class="list-group-item">The administration of medicine</li>
              <li class="list-group-item">Gathering of of all mail</li>
              <li class="list-group-item">Watering of all plants and garden</li>
              <li class="list-group-item">Report card including the time of the visit and details of the pet care experience</li>
              <li class="list-group-item">In additional we are prepared to accomodate any other unlisted and reasonable needs</li>
              <li class="list-group-item">$65 includes overnight stay from 8:00 pm until 7:00 am and 1 late afternoon visit. Includes care for 2 pets ($3 per additional pet)</li>
            </ul>

#vacationListTitle {
  background-color:map-get($colorMap, orangeColor) !important;
  font-family:$headerFont;
  font-size:1.3em;
  content:none !important;
  padding-left:0px !important;
}

#vacationList {
  margin:0 auto;
  border-radius:5px;

  li {
    padding-left:30px;
  }

  li:nth-child(odd) {
    background-color:#e5e5e5;
  }

  li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -21px;
    color: #555;
  }
}

具有类名为vacationListTitle的列表项是我想从中删除图标的列表项。有什么想法吗？

谢谢！

Answer 1

您可以使用display属性执行此操作，专门针对::before伪元素：

#vacationListTitle::before {
  display: none;
}

Answer 2

您可以删除 vacationList

之前的第一个内容

#vacationList {
    .....
    .....
    .....
    li:first-of-type:before {
      content: "";
    }
}

或者您可以直接使用id #vacationListTitle

 #vacationListTitle:before {
      content: "";
    }

See demo here

从引导列表中删除单个项目符号图标

2 个答案: