diff --git a/.scss-lint.yml b/.scss-lint.yml
index 5c8e5ac0758870164ce18cd6bf21436fedc09346..aae8d9b6dbe023bf2522e8372a6198711db176f2 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -143,7 +143,7 @@ linters:
   # with two colons. Pseudo-classes, like :hover and :first-child, should
   # be declared with one colon.
   PseudoElement:
-    enabled: false
+    enabled: true
   
   # Avoid qualifying elements in selectors (also known as "tag-qualifying").
   QualifyingElement:
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 810dab22e90b65ca3281c721dea730e41b5aa755..baa38ab60c886d8cb640e4181abfde84bc68d776 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -486,7 +486,7 @@
         font-size: 20px;
         text-indent: 0;
 
-        &:before {
+        &::before {
           display: block;
           position: relative;
           top: -2px;
@@ -518,7 +518,7 @@
         background-color: transparent;
         border: 0;
 
-        .ui-icon:before {
+        .ui-icon::before {
           color: $md-link-color;
         }
       }
@@ -527,7 +527,7 @@
     .ui-datepicker-prev {
       left: 0;
 
-      .ui-icon:before {
+      .ui-icon::before {
         content: '\f104';
         text-align: left;
       }
@@ -536,7 +536,7 @@
     .ui-datepicker-next {
       right: 0;
 
-      .ui-icon:before {
+      .ui-icon::before {
         content: '\f105';
         text-align: right;
       }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 48e34a0066e29bf7109e54bf64d4c1297d621e89..76de3abe808ccc2237dda0e0d72686f9f5d64265 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -14,7 +14,7 @@
     border-bottom: 1px solid #eee;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
-    &:after {
+    &::after {
       content: " ";
       display: table;
       clear: both;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index eb63a9f214b7d8db98b95c0121eed4babfe24db6..875cded8b4e7adb0b091b9ef6bc8228508725487 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -45,7 +45,7 @@
 
 @media (max-width: $screen-xs-max) {
   .timeline {
-    &:before {
+    &::before {
       background: none;
     }
 
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 266a8024809c29b45660afffba509780b7b7806f..070e42d63d2e7b33b47b397a2320300aa0a87ed7 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -148,7 +148,7 @@
 
   a[href*="/uploads/"],
   a[href*="storage.googleapis.com/google-code-attachments/"] {
-    &:before {
+    &::before {
       margin-right: 4px;
 
       font: normal normal normal 14px/1 FontAwesome;
@@ -158,13 +158,13 @@
       content: "\f0c6";
     }
 
-    &:hover:before {
+    &:hover::before {
       text-decoration: none;
     }
   }
 
   a.no-attachment-icon {
-    &:before {
+    &::before {
       display: none;
     }
   }
@@ -183,13 +183,13 @@
       position: absolute;
       text-decoration: none;
 
-      &:after {
+      &::after {
         content: image-url('icon_anchor.svg');
         visibility: hidden;
       }
     }
 
-    &:hover > a.anchor:after {
+    &:hover > a.anchor::after {
       visibility: visible;
     }
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index e0367d1d9428741ce5c16fee1d3036aa67b10fc4..fde138c874da4996070939edf4bb689f8988938c 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -94,14 +94,14 @@
           position: relative;
 
           &.old {
-            &:before {
+            &::before {
               content: '-';
               position: absolute;
             }
           }
 
           &.new {
-            &:before {
+            &::before {
               content: '+';
               position: absolute;
             }
@@ -471,7 +471,7 @@
 .file-holder {
   .diff-line-num:not(.js-unfold-bottom) {
     a {
-      &:before {
+      &::before {
         content: attr(data-linenumber);
       }
     }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index f88175365c680c6fa503cafd654f1f72f9ca02bf..3c60db40ffe8176075622ee050e140b10af61dbf 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -474,8 +474,8 @@
         }
 
         .arrow {
-          &:before,
-          &:after {
+          &::before,
+          &::after {
             content: '';
             display: inline-block;
             position: absolute;
@@ -486,14 +486,14 @@
             top: 18px;
           }
 
-          &:before {
+          &::before {
             left: -5px;
             margin-top: -6px;
             border-width: 7px 5px 7px 0;
             border-right-color: $border-color;
           }
 
-          &:after {
+          &::after {
             left: -4px;
             margin-top: -9px;
             border-width: 10px 7px 10px 0;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 3f6fdaebc1dce71d73585d30450f7c7636aa5754..ede29db1979aa1e2a5946552561f9a5d3186546d 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -77,14 +77,14 @@
 
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
-  &:after {
+  &::after {
     content: "\00B7"; // Middle Dot
     padding: 0 6px;
     font-weight: bold;
   }
 
   &:last-child {
-    &:after {
+    &::after {
       content: "";
       padding: 0;
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index f63559418370bdea9ea1176441a2e3deb5ab9371..f0d39b353d2490c950da39d13acb766e6c9f8a46 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -193,7 +193,7 @@
     margin-left: 4px;
 
     .arrow {
-      &:before {
+      &::before {
         content: '';
         display: inline-block;
         position: absolute;
@@ -209,7 +209,7 @@
         pointer-events: none;
       }
 
-      &:after {
+      &::after {
         content: '';
         position: absolute;
         width: 0;
@@ -351,7 +351,7 @@ a.deploy-project-label {
   line-height: 36px;
   margin: 0;
 
-  > li + li:before {
+  > li + li::before {
     padding: 0 3px;
     color: #999;
   }
@@ -790,7 +790,7 @@ pre.light-well {
     top: 7px;
     color: $location-icon-color;
 
-    &:before {
+    &::before {
       font-family: FontAwesome;
       font-weight: normal;
       font-style: normal;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 6d472e8293f968697caf36804df0597f14329faf..bf688af50e2af08a13507d43d46a4860bec1dffb 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -72,7 +72,7 @@
       top: 0;
       color: $location-icon-color;
 
-      &:before {
+      &::before {
         font-family: FontAwesome;
         font-weight: normal;
         font-style: normal;
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 587bd6a1e8a8fd882e291275ce4837b7faf87621..e73cecc92be3a998f2348dcc260a41bc0296d6c3 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -5,7 +5,7 @@
   }
 
   .example {
-    &:before {
+    &::before {
       content: "Example";
       color: #bbb;
     }
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 8239b7e6879c1f2fd030b4bc5443c22457187f55..0ff3c3f547290b97a58da0d6113e2fa581c5a1ed 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -35,7 +35,7 @@ nav.navbar-collapse.collapse,
 .nav,
 .btn,
 ul.notes-form,
-.merge-request-ci-status .ci-status-link:after,
+.merge-request-ci-status .ci-status-link::after,
 .issuable-gutter-toggle,
 .gutter-toggle,
 .issuable-details .content-block-small,