diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index d2302b829c..07ca300a59 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -8,7 +8,7 @@
   > li {
     display: inline-block;
 
-    + li:before {
+    + li::before {
       $nbsp: "\00a0";
       padding-right: .5rem;
       padding-left: .5rem;
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index c5a7fdfcba..c7d182b5a3 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -141,12 +141,12 @@
   }
 
   .icon-prev {
-    &:before {
+    &::before {
       content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
     }
   }
   .icon-next {
-    &:before {
+    &::before {
       content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
     }
   }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 0565f2f754..34dfc48e71 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -109,7 +109,7 @@
   .c-input {
     display: inline;
 
-    &:after {
+    &::after {
       display: block;
       margin-bottom: .25rem;
       content: "";
@@ -199,10 +199,10 @@
   border-radius: .25rem;
   @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
-.file-custom:after {
+.file-custom::after {
   content: "Choose file...";
 }
-.file-custom:before {
+.file-custom::before {
   position: absolute;
   top: -.075rem;
   right: -.075rem;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 3b0df96d86..2f0659a5c6 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -6,7 +6,7 @@
 
 .dropdown-toggle {
   // Generate the caret automatically
-  &:after {
+  &::after {
     display: inline-block;
     width: 0;
     height: 0;
@@ -26,7 +26,7 @@
 
 .dropup {
   .dropdown-toggle {
-    &:after {
+    &::after {
       border-bottom: $caret-width solid;
       border-top: 0;
     }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 94cf1004b2..7fbd4448ef 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -93,7 +93,7 @@
   margin-left:  $navbar-padding-horizontal;
   overflow: hidden;
 
-  &:before {
+  &::before {
     content: "\00a0";
   }
 }
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 2bd8415d54..674a8f31f6 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -29,7 +29,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
       border-bottom-width: 0;
-      &:after {
+      &::after {
         bottom: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -49,7 +49,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
       border-left-width: 0;
-      &:after {
+      &::after {
         bottom: -$popover-arrow-width;
         left: 1px;
         content: "";
@@ -69,7 +69,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
       border-bottom-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         top: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -89,7 +89,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         right: 1px;
         bottom: -$popover-arrow-width;
         content: "";
@@ -118,11 +118,11 @@
 
 // Arrows
 //
-// .popover-arrow is outer, .popover-arrow:after is inner
+// .popover-arrow is outer, .popover-arrow::after is inner
 
 .popover-arrow {
   &,
-  &:after {
+  &::after {
     position: absolute;
     display: block;
     width: 0;
@@ -134,7 +134,7 @@
 .popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow:after {
+.popover-arrow::after {
   content: "";
   border-width: $popover-arrow-width;
 }
diff --git a/scss/_print.scss b/scss/_print.scss
index 4bbece544f..e9cc65e32a 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -7,8 +7,8 @@
 
 @media print {
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     text-shadow: none !important;
     box-shadow: none !important;
   }
@@ -18,7 +18,7 @@
     text-decoration: underline;
   }
 
-  abbr[title]:after {
+  abbr[title]::after {
     content: " (" attr(title) ")";
   }
 
diff --git a/scss/_progress.scss b/scss/_progress.scss
index a93a634267..6d28c4a143 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -31,7 +31,7 @@
   @include border-radius($border-radius);
   @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
 }
-.progress[value]::-webkit-progress-value::before {
+.progress[value]::-webkit-progress-value:::before {
   content: attr(value);
 }
 .progress[value]::-webkit-progress-value {
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index de32aae2b7..0c0accb8b7 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -22,8 +22,8 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
diff --git a/scss/_type.scss b/scss/_type.scss
index 3d349e6442..2d2de68ec1 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -143,7 +143,7 @@ mark,
     line-height: $line-height;
     color: $blockquote-small-color;
 
-    &:before {
+    &::before {
       content: "\2014 \00A0"; // em dash, nbsp
     }
   }
@@ -159,8 +159,8 @@ mark,
 
   // Account for citation
   footer {
-    &:before { content: ""; }
-    &:after {
+    &::before { content: ""; }
+    &::after {
       content: "\00A0 \2014"; // nbsp, em dash
     }
   }
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index 439455f6d8..d0ae125f3d 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,5 +1,5 @@
 @mixin clearfix() {
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;