Check mark escapes checkbox

I'm trying to write CSS code to mimic and style a checkbox because an input type="checkbox" cannot be stylized.

Here is my HTML:

<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span> shirt </span>
    <br>
</label>

Here is my CSS inspired by an online tutorial:

label > input[type="checkbox"] + span::before {
    content: "✓";
    width: 20pt;
    height: 20pt;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;

    display: inline-block;
    vertical-align: middle;

} 

The behavior I want is:

• Empty square is vertically centered
• Checkmark goes inside square

The square is centered, but the checkmark "✓" stays at the bottom and is on the same level with the text that comes to the right of the checkbox. I have tried different combinations of display and vertical-align but nothing has worked. How can I center the checkmark?