Include :after pseudo element in property set

src/components/Messages/Messages.css

@@ -2,15 +2,17 @@
 
 .root {
   margin: 0;
-}
 
-.root:after {
+  /* Clearfix */
   @apply --clearfix;
 }
 
 .messageItem {
   margin-bottom: 35px;
 
+  /* Clearfix */
+  @apply --clearfix;
+
   @media (--viewportMedium) {
     margin-bottom: 40px;
   }
@@ -20,10 +22,6 @@
   }
 }
 
-.messageItem:after {
-  @apply --clearfix;
-}
-
 .message,
 .ownMessage {
   /* Preserve newlines, but collapse other whitespace */

src/marketplace.css

@@ -98,12 +98,12 @@
 
   /* ================ Clearfix solution ================ */
 
-  /* Apply to an :after pseudo element of the container where
-   * the clearfix effect is desired */
   --clearfix {
-    content: '';
-    display: table;
-    clear: both;
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
   }
 
   /* ================ Links ================ */