title: Transform :before without border
body: <p>is there any possibility to scale an pseudo element without changing the thickness of the border? </p>
  
  <p>The box should just increase the size by 8px in width and height. With the scale option it always transforms also the thickness of the border. But it should be on hover the same. It should only increase by 8px in width and height. But its only an pseudo element of the input field, so i can't use padding or margin.</p>
  
  <p>Heres my Code</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;form id="commentForm" action=""&gt;
        &lt;div class="form-holder"&gt;
            &lt;input class="form-holder__input ea-input" type="text" id="name" name="name" required /&gt;
            &lt;label class="form-holder__label"&gt;Email-Adress&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-holder"&gt;
            &lt;input class="form-holder__input ea-input" type="text" id="name" name="name" required /&gt;
            &lt;label class="form-holder__label"&gt;Name*&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.selecty-select {
    width: 100%;
    display: block;
    border: none;
    border-bottom: 1px solid #d9d6d4;
    background: transparent;
    height: 36px;
    line-height: 36px;
    text-align: left;
    font-size: 16px;
    color: #1b1919;
    border-radius: 0;
    position: relative;
    outline: 0 none;
  }
  
  .selecty-select[disabled] {
    cursor: not-allowed;
    color: #8d8480;
    border-bottom: 1px dashed #d9d6d4;
  }
  
  .selecty-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed #8d8480;
  }
  
  .selecty {
    width: 100%;
    position: relative;
    font-size: 20px;
    color: #1b1919;
  }
  
  .selecty.disabled .selecty-selected {
    border-bottom: 1px dashed #d9d6d4;
    cursor: not-allowed;
    color: #8d8480;
  }
  
  .selecty .selecty-selected {
    display: block;
    border: none;
    width: 100%;
    cursor: pointer;
    background: none;
    outline: none !important;
    height: 60px;
    line-height: 64px;
    text-align: left;
    border-radius: 3px;
    color: #1b1919;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 24px;
    white-space: nowrap;
  }
  
  .selecty .selecty-selected:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 40%;
    width: 20px;
    height: 20px;
    background: url(../img/dropdown.svg);
    margin-top: -2px;
    right: 24px;
  }
  
  .selecty .selecty-selected:hover, .selecty .selecty-selected:active, .selecty .selecty-selected:focus {
    text-decoration: none;
    background: none;
  }
  
  .selecty .selecty-options {
    position: absolute;
    top: -2px;
    left: -1%;
    background-color: #fff;
    border: 3px solid #161616;
    border-radius: 3px;
    margin: 0;
    max-height: 200px;
    width: 102%;
    overflow-y: auto;
    z-index: 999;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: opacity 0.1s cubic-bezier(.5,.25,.015,1), -webkit-transform 0.1s cubic-bezier(.5,.25,.015,1);
    transition: opacity 0.1s cubic-bezier(.5,.25,.015,1), -webkit-transform 0.1s cubic-bezier(.5,.25,.015,1);
    -o-transition: opacity 0.1s cubic-bezier(.5,.25,.015,1), -o-transform 0.1s cubic-bezier(.5,.25,.015,1);
    transition: transform 0.1s cubic-bezier(.5,.25,.015,1), opacity 0.1s cubic-bezier(.5,.25,.015,1);
    transition: transform 0.1s cubic-bezier(.5,.25,.015,1), opacity 0.1s cubic-beziercubic-bezier(.5,.25,.015,1), -webkit-transform 0.1s cubic-bezier(.5,.25,.015,1), -o-transform 0.1s cubic-bezier(.5,.25,.015,1);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    visibility: hidden;
  }
  
  .selecty .selecty-options.active {
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    transform-origin: top;
  }
  
  .selecty .selecty-options li {
      cursor: pointer;
      text-align: left;
      margin: 0 24px;
      list-style: none;
      height: 48px;
      line-height: 48px;
      border-bottom: 2px solid lightgrey;
      position: relative;
      transition: all 200ms;
  }
  
  .selecty .selecty-options li:last-child {
    border-bottom: 0px;
  }
  
  .selecty .selecty-options li:hover, .selecty .selecty-options li.active {
    padding-left: 8px;
    transition: all 200ms;
  }
  
  .selecty .selecty-options li &gt; span &gt; label {
    top: 1px;
    left: 3px;
    height: 18px;
  }
  
  .selecty .selecty-options li.selected:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 40%;
    width: 20px;
    height: 20px;
    background: url(../img/checkmark.svg);
    margin-top: -2px;
    right: 0;
  }
  
  .selecty .selecty-options li.disabled {
    color: #8d8480;
    cursor: default;
  }
  
  .selecty .selecty-options li.disabled:hover {
    background: none;
  }
  
  .selecty .selecty-options li.optgroup {
    cursor: default;
    color: #8d8480;
    height: 32px;
    line-height: 32px;
  }
  
  .selecty .selecty-options li.optgroup:hover {
    background: none;
  }
  
  .selecty .selecty-options li.optgroup-option {
    padding-left: 40px;
  }
  
  .wrapper {
      width: 50%;
      margin: 0 auto;
      text-align: center;
  }
  
  * {
      margin: 0;
      padding: 0;
      font-family: "seravek-regular",Helvetica,Arial,sans-serif;
  }
  
  form {
      display: block;
      width: 400px;
      margin: auto;
      padding-top: 50px;
  }
  
  .form-holder {
      position: relative;
      margin: 16px 0 22px;
  }
  
  .form-holder__input {
      display: block;
      width: 90%;
      height: 42px;
      line-height: 42px;
      border: 0;
      transition: 280ms;
      border-radius: 3px;
      font-size: 16px;
      color: #161616;
      padding-left: 7px;
      background-color: transparent;
      padding: 18px 0px 0px 24px;
  }
  
  .form-holder__label {
      position: absolute;
      top: calc(50px/*input-height*/
        - 18px/*font-size*/
        - 12px/*line-height tweak*/ );
      );
      transition: 280ms;
      opacity: .5;
      pointer-events: none;
      font-size: 18px;
      left:24px;
      transform-origin: left;
  }
  
  .form-holder__input:focus {
      outline: 0;
  }
  
  .form-holder__input:valid {
      border-color: #161616;
      color: #161616;
  }
  
  .form-holder__input:invalid:focus {
      border-color: #FF6969;
  }
  
  .form-holder__input:focus ~ .form-holder__label,
  .form-holder__input:valid ~ .form-holder__label {
      top: 10px;
      opacity: 1;
      transform: scale(.75);
      color: #a3a3a3;
  }
  
  .form-holder:before, .selecty:before {
      content: '';
      position: absolute;
      border: solid 2px #161616;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      z-index: -1;
      transition: 280ms ease-in-out;
  
  }
  
  .form-holder:hover:before, .selecty:hover:before{
      transform: scale(1.02);
      transition: all 50ms ease-in-out;
      border: solid 2px #161616;
  }
  .form-holder.focussed:before, .selecty.focussed:before {
      transform: scale(1.02);
      transition: all 50ms ease-in-out;
      border: solid 3px #161616;
  }
  
  .error{
    border: solid 2px red;
  }
  
  
  /* Change Autocomplete styles in Chrome*/
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: #161616;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  
  .ea-btn{
    padding: 20px 40px;
    background: #FF1E3C;
    color: #000;
    text-decoration: none;
    transition: padding .1s cubic-bezier(.5,.25,.015,1),-webkit-transform .1s cubic-bezier(.5,.25,.015,1);
    border-radius: 3px;
    font-size: 20px;
    line-height: 60px;
    min-width: 136px;
  }
  
  .ea-btn:hover{
    padding: 22px 42px;
  }
  .button{
    margin-top: 40px;
  }
  </code></pre>
  
  <p>Thank you!</p>