<div class="box">
  <div class="float-left">floated content</div>
</div>
:root {
  --clearfix: {
    display: table;
    clear: both;
    content: '';
  };
}

.box{
  background-color: #f00;
}

.float-left{
  float: left;
}

.box:after{
  content:'after';
  
  @apply --clearfix;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.