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

【问题标题】：Removing a single bulleted icon from a bootstrap list从引导列表中删除单个项目符号图标
【发布时间】：2017-09-09 07:19:36
【问题描述】：

我有一个带有图标的 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 的列表项是我希望从中删除图标的列表项。有什么想法吗？

谢谢！

【问题讨论】：

#vacationListTitle:before { display: none; } ?
谢谢你的好先生。

标签： css twitter-bootstrap pseudo-element

【解决方案1】：

你可以删除vacationList的第一个li之前的内容

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

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

 #vacationListTitle:before {
      content: "";
    }

See demo here

【讨论】：

这不起作用，因为它的特异性低于在 OP 示例中添加图标的选择器。

【解决方案2】：

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

#vacationListTitle::before {
  display: none;
}

【讨论】：

此标记使该列表项消失。我只想让图标消失。
@Brixsta 对不起，我错过了你问题的那一部分。我修改了答案。