Use double colons for psuedo elements

Fix #17052

scss/_breadcrumb.scss

@@ -8,7 +8,7 @@
   > li {
     display: inline-block;
 
-    + li:before {
+    + li::before {
       $nbsp: "\00a0";
       padding-right: .5rem;
       padding-left: .5rem;

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)
     }
   }

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;

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;
     }

scss/_navbar.scss

@@ -93,7 +93,7 @@
   margin-left:  $navbar-padding-horizontal;
   overflow: hidden;
 
-  &:before {
+  &::before {
     content: "\00a0";
   }
 }

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;
 }

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) ")";
   }
 

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 {

scss/_reboot.scss

@@ -22,8 +22,8 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 

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
     }
   }

scss/mixins/_clearfix.scss

 @mixin clearfix() {
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;