I think you're more-or-less answered your own question on this one!
Here's your answer:
.marker-check-mark:before{
content: "\2718";
margin: 0.5em;
color : Black;
font-size: 16px
}
The :before
pseudo-element essentially acts as a stand-alone element in your DOM which means that you can style it entirely separately from the element itself. So, adding font-size
to .marker-check-mark:before
will not effect the font-size of .marker-check-mark
.
Have a read here for more information on how it all works: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/