Chrome not showing :after pseudo selector

Question

Really bugging me, but why isn't Chrome showing the :after pseudo selector?? I haven't noticed this before. It's quite simple CSS too. It shows in all other browsers as well!

Firefox

Chrome

I did notice on the Bootstrap site though, their forms are showing the :after selector in the DOM. Weird...

Please look at this code snippet that I made. It's doing it here too if you inspect the DOM in your browser. -

.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

The content property is required for :before and :after pseudo selectors. If it is not included, it will have no effect on the element. If you are using the selectors to preform a clearfix, or some other case where you don't actually want any content, you can simply leave the content property blank with content:''; Like you have already done for the :before selector. Your CSS should look like this:

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

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

JSFiddle