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

时间：2015-08-18 17:37:17

标签： html css html5 google-chrome

真的很烦我，但为什么Chrome不显示：after伪选择器？我以前没有注意到这一点。它也很简单。它也显示在所有其他浏览器中！

火狐

Firefox

铬

Chrome

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

Bootstrap form

请查看我制作的代码段。如果你在浏览器中检查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>

1 个答案:

答案 0 :(得分：10)

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

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

Learning To Use The :before And :after Pseudo-Elements In CSS

JSFiddle

相关问题
最新问题