title: Shifting checkbox to the right of label
body: <p>I was wondering if there is a way to shift the checkbox to the right side of the label? By default its always on the left. How can I shift it to the right?</p>
  
  <pre><code>&lt;style&gt;
  input[type=checkbox].css-checkbox {
      position:absolute;
      z-index:-1000;
      left:-1000px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height:1px;
      width:1px;
      margin:-1px;
      padding:0;
      border:0;
  }
  input[type=checkbox].css-checkbox + label.css-label {
      height: 28px;
      display: inline-block;
      line-height: 28px;
      background-repeat: no-repeat;
      cursor: pointer;
  }
  input[type=checkbox].css-checkbox:checked + label.css-label {
      background-position: 0 -28px;
  }
  label.css-label {
      background-image: url(wp-content/uploads/2017/02/cb.png);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;input type="checkbox" id="checkboxG1" class="css-checkbox" /&gt;
  &lt;label for="checkboxG1" class="css-label"&gt;TEXT&lt;/label&gt;
  </code></pre>