diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 4a08ba80e2f..3934fa69640 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -207,7 +207,7 @@
 }
 
 // Caret to indicate there is a submenu
-.dropdown-submenu > a:after {
+.dropdown-submenu > a::after {
   display: block;
   content: " ";
   float: right;
@@ -220,7 +220,7 @@
   margin-top: 5px;
   margin-right: -10px;
 }
-.dropdown-submenu:hover > a:after {
+.dropdown-submenu:hover > a::after {
   border-left-color: $dropdownLinkColorHover;
 }
 
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 8f3b9186d15..79c0e0178df 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -23,14 +23,14 @@
   li {
     display: inline-block;
     padding-right: 2px;
-    &:after {
+    &::after {
       content: ' | ';
       padding-left: 2px;
     }
   }
 
   li:last-child {
-    &:after {
+    &::after {
       padding-left: 0;
       content: '';
     }
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 602ea9ef5c1..3f7c11df7e5 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -127,7 +127,7 @@ $gf-form-margin: 0.25rem;
   &--dropdown {
     padding-right: $input-padding-x*2;
 
-    &:after {
+    &::after {
       position: absolute;
       top: 35%;
       right: $input-padding-x/2;
@@ -164,7 +164,7 @@ $gf-form-margin: 0.25rem;
     }
   }
 
-  &:after {
+  &::after {
     position: absolute;
     top: 35%;
     right: $input-padding-x/2;
@@ -176,7 +176,7 @@ $gf-form-margin: 0.25rem;
   }
 
   &--has-help-icon {
-    &:after {
+    &::after {
       right: $input-padding-x*3;
     }
   }
@@ -215,7 +215,7 @@ $gf-form-margin: 0.25rem;
   background-color: $input-bg;
   padding-right: $input-padding-x;
 
-  &:after {
+  &::after {
     position: absolute;
     top: 35%;
     right: $input-padding-x/2;
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index a7e5917d939..e6d42597c75 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -1,4 +1,4 @@
-.grafana-info-box:before {
+.grafana-info-box::before {
   content: "\f05a";
   font-family:'FontAwesome';
   position: absolute;
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index b830561f816..227069f83b6 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -47,19 +47,19 @@
   white-space: nowrap;
   font-size: 85%;
   text-align: left;
-  &.current:before {
+  &.current::before {
     content: "Current: "
   }
-  &.max:before {
+  &.max::before {
     content: "Max: "
   }
-  &.min:before {
+  &.min::before {
     content: "Min: "
   }
-  &.total:before {
+  &.total::before {
     content: "Total: "
   }
-  &.avg:before {
+  &.avg::before {
     content: "Avg: "
   }
 }
@@ -95,7 +95,7 @@
     &--right-y {
       float: none;
 
-      .graph-legend-alias:after {
+      .graph-legend-alias::after {
         content: '(right-y)';
         padding: 0 5px;
         color: $text-color-weak;
@@ -137,7 +137,7 @@
 
   .graph-legend-value {
     &.current, &.max, &.min, &.total, &.avg {
-      &:before {
+      &::before {
         content: '';
       }
     }
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index eb583e224bc..8824c827562 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -74,11 +74,11 @@
     background-color: $grafanaListBackground;
     margin-bottom: 4px;
 
-    .search-result-icon:before {
+    .search-result-icon::before {
       content: "\f009";
     }
 
-    &.search-item-dash-home .search-result-icon:before {
+    &.search-item-dash-home .search-result-icon::before {
       content: "\f015";
     }
   }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 685406bb098..6893bf39a85 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -151,7 +151,7 @@
   display: inline-block;
   position: relative;
 
-  &:after {
+  &::after {
     display: block;
     position: absolute;
     top: 50%;
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index 4216029bab2..72b980a772f 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -30,7 +30,7 @@ $switch-height: 1.5rem;
     background-color: $page-bg;
   }
 
-  input + label:before, input + label:after {
+  input + label::before, input + label::after {
     @include buttonBackground($input-bg, $input-bg);
 
     display: block;
@@ -47,13 +47,13 @@ $switch-height: 1.5rem;
   }
 
   &:hover {
-    input + label:before {
+    input + label::before {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
       color: $text-color;
       text-shadow: $text-shadow-faint;
     }
 
-    input + label:after {
+    input + label::after {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
       color: lighten($orange, 10%);
       text-shadow: $text-shadow-strong;
@@ -61,7 +61,7 @@ $switch-height: 1.5rem;
 
   }
 
-  input + label:before {
+  input + label::before {
     font-family: 'FontAwesome';
     content: "\f096"; // square-o
     color: $text-color-faint;
@@ -70,7 +70,7 @@ $switch-height: 1.5rem;
     text-shadow: $text-shadow-faint;
   }
 
-  input + label:after {
+  input + label::after {
     content: "\f046"; // check-square-o
     color: $orange;
     text-shadow: $text-shadow-strong;
@@ -81,11 +81,11 @@ $switch-height: 1.5rem;
     backface-visibility: hidden;
   }
 
-  input:checked + label:before {
+  input:checked + label::before {
     transform: rotateY(180deg);
   }
 
-  input:checked + label:after {
+  input:checked + label::after {
     transform: rotateY(0);
   }
 }
diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss
index 8092446e2e5..85ab6d602fd 100644
--- a/public/sass/components/_tagsinput.scss
+++ b/public/sass/components/_tagsinput.scss
@@ -24,7 +24,7 @@
     [data-role="remove"] {
       margin-left:8px;
       cursor:pointer;
-      &:after{
+      &::after{
         content: "x";
         padding:0px 2px;
       }
diff --git a/public/sass/components/_tightform.scss b/public/sass/components/_tightform.scss
index 8833e445372..7c43854b06c 100644
--- a/public/sass/components/_tightform.scss
+++ b/public/sass/components/_tightform.scss
@@ -25,12 +25,11 @@
   border: 1px solid $tight-form-border;
   border-bottom: none;
 
-  .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
+  .tight-form, .tight-form-item, [type="text"].tight-form-input, [type="text"].tight-form-clear-input  {
     border: none;
   }
 }
 
-
 .spaced-form {
   .tight-form {
     margin: 7px 0;
@@ -122,14 +121,14 @@
   }
 }
 
-input[type=text].tight-form-func-param {
+input[type="text"].tight-form-func-param {
   background: transparent;
   border: none;
   margin: 0;
   padding: 0;
 }
 
-input[type=text].tight-form-clear-input {
+input[type="text"].tight-form-clear-input {
   padding: 8px 7px;
   border: none;
   margin: 0px;
@@ -138,10 +137,10 @@ input[type=text].tight-form-clear-input {
   border-right: 1px solid $tight-form-border;
 }
 
-[type=text],
-[type=email],
-[type=number],
-[type=password] {
+[type="text"],
+[type="email"],
+[type="number"],
+[type="password"] {
   &.tight-form-input {
     background-color: $input-bg;
     border: none;
@@ -157,7 +156,7 @@ input[type=text].tight-form-clear-input {
   }
 }
 
-input[type=checkbox].tight-form-checkbox {
+input[type="checkbox"].tight-form-checkbox {
   margin: 0;
 }
 
@@ -200,7 +199,7 @@ select.tight-form-input {
 }
 
 .tight-form-radio {
-  input[type=radio] {
+  input[type="radio"] {
     margin: 0;
   }
   label {
diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index 8bfbdef4cff..1ecc2c7a166 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -99,10 +99,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.fa-chevron-left:before {
+.fa-chevron-left::before {
   content: "\f053";
 }
-.fa-chevron-right:before {
+.fa-chevron-right::before {
   content: "\f054";
 }