Chrome未显示:在伪选择器之后

Question

真的很烦我,但为什么不是Chrome显示:后伪选择器？我以前没有注意到这一点.它也很简单.它也显示在所有其他浏览器中!

火狐

铬

我在Bootstrap网站上注意到了,他们的表单显示:after了DOM中的选择器.奇怪的...

请查看我制作的代码片段.如果你在浏览器中检查DOM,它也在这里做. -

.form-horizontal .form-group {
  margin-bottom: 10px;
}
.form-horizontal .form-group:before {
  display: table;
  content: " ";
}
.form-horizontal .form-group:after {
  clear: both;
}

<div class="form-horizontal">
  <div class="form-group">
    <label>First Name *</label>
    <input id="txtCustodianFName" type="text" class="form-control" placeholder="First Name" />
  </div>

  <div class="form-group">
    <label>Last Name *</label>
    <input id="txtCustodianLName" type="text" class="form-control" placeholder="Last Name">
  </div>
</div>

Answer 1

该content属性是必需的:before和:after伪选择.如果未包含,则对元素没有影响.如果您使用选择器来执行clearfix,或者您实际上不想要任何内容​​的其他情况,您可以将该content属性留空,content:'';就像您已经为:before选择器所做的那样.你的CSS应该是这样的:

.form-horizontal .form-group:after {
  content: '';
  clear: both;
}

学习使用:之前和之后:CSS中的伪元素之后

的jsfiddle