apply tick to checkbox that extends beyond border

When checkbox is selected, we would like to apply a tick which extends beyond the checkbox area. Applying background image does not work since it cannot extend beyond the checkbox area.

So, I thought of creating nested spans and applying background image to the outer span. However, the tick image gets hidden by the inner span.

Quick jsfiddle (does not show the image) is here

<span class="outer">
  <span class="inner">
  </span>
</span>

span.inner{
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid;
  background-color:yellow;
}

span.outer{
  display:inline-block;
  width:20px;
  height:20px;
  border:1px solid red;
  box-sizing:border-box;
  padding-left:3px;
  padding-top:1px;
  background-color:orange;
}

Basically, the tick gets hidden by the span with yellow background.

Is there a way to achieve this without absolute positioning?