How to apply font size attribute to ul marker without afftecting list content's font size

Question

I am using a contentEditable div to add my contents. i set the font size, color, face and bullets from my UI using javascript(script#). I apply my own bullet style using css. Here is one of my css

.marker-check-mark:before{
     content: "\2718";
     margin: 0.5em;
     color : Black; 
}

this prints a "check mark" as the "ul" type.

Now i want to give its font size as 16. but i dont want this to affect the font size of the contents of this list.

Is there a way to do this.

One solution is to add font tag or span tag with syle attributes inside every li. But i want to avoid this solution.

please give me a better solution.....

Answer 1

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/

Answer 2

If I understand what you're asking, you want to set the size of the check marks? Why not simply set the font size of the before selector?

.marker-check-mark:before  {
    content:"\2718";
    margin: 0.5em;
    color : Black;
    font-size:16px;
}

FIDDLE