Add input label before/after pseudo-elements css mixins (#703)

Add input label before/after pseudo-elements css mixins

Co-authored-by: Yaroslav Dubinskyi <[email protected]>

Author: Elliott Marquez

paper-input-container.js

@@ -152,6 +152,8 @@ Custom property | Description | Default
 `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
 `--paper-input-prefix` | Mixin applied to the input prefix | `{}`
 `--paper-input-suffix` | Mixin applied to the input suffix | `{}`
+`--paper-input-container-label-before` | Mixin applied to label before pseudo element | {}
+`--paper-input-container-label-after` | Mixin applied to label after pseudo element (useful for required asterisk) | {}
 
 This element is `display:block` by default, but you can set the `inline`
 attribute to make it `display:inline-block`.
@@ -270,6 +272,17 @@ Polymer({
         @apply --paper-transition-easing;
       }
 
+
+      .input-content ::slotted(label):before,
+      .input-content ::slotted(.paper-input-label):before {
+        @apply --paper-input-container-label-before;
+      }
+
+      .input-content ::slotted(label):after,
+      .input-content ::slotted(.paper-input-label):after {
+        @apply --paper-input-container-label-after;
+      }
+
       .input-content.label-is-floating ::slotted(label),
       .input-content.label-is-floating ::slotted(.paper-input-label) {
         -webkit-transform: translateY(-75%) scale(0.75);