Checkbox content IE 11/Edge
<p>I face a problem with <code>checkbox</code> in IE and Edge, namely a "content" class. I have the following code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)"&gt;
    &lt;label for="checkbox" class="checkbox-edit-article-label"&gt;
        Show only published articles
    &lt;/label&gt;
&lt;/input&gt;
</code></pre>

<p>When field is checked</p>

<pre class="lang-css prettyprint-override"><code>.checkbox-edit-article:checked + .checkbox-edit-article-label:before {
    content: url(../img/mark-white.png);
    background: rgb(49,119,61);
    color: #fff;
    height: 44px;
    line-height: 2.4;
    transition: all .2s;
}
</code></pre>

<p>and static</p>

<pre class="lang-css prettyprint-override"><code>.checkbox-edit-article + .checkbox-edit-article-label:before {
    content: '';
    background: #fff;
    border: 1px solid #BFBFBF;
    display: inline-block;
    vertical-align: middle;
    width: 43px;
    height: 44px;
    margin-right: 10px;
    margin-top: 1px;
    text-align: center;
    box-shadow: inset 0px 0px 0px 1px white;
}
</code></pre>

<p>In Chrome <code>content: url(../img/mark-white.png);</code> is displayed perfectly, but in IE this check image is too high because of <code>line-height</code>, but I don't know how to center the picture in the checkbox.</p>

<p>I ask your help, how I can align the image?</p>

<p>Thank you in advance!</p>