Как применить атрибут размера шрифта к маркеру ul, не изменяя размер шрифта содержимого без содержания,

Question

Я использую contentEditable div для добавления моего содержимого. Я устанавливаю размер шрифта, цвет, лицо и пули из своего пользовательского интерфейса с помощью javascript (сценарий #). Я применяю свой собственный стиль пули, используя css. Вот один из моих CSS

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

это печатает «галочку» в качестве типа «уль».

Теперь я хочу указать размер шрифта как 16. но я не хочу, чтобы это повлияло на размер шрифта содержимого этого списка.

Есть ли способ сделать это.

Одним из решений является добавление тега шрифта или тега span с атрибутами syle внутри каждого li. Но я хочу избежать этого решения.

пожалуйста, дайте мне лучшее решение .....

Answer 1

Я думаю, что вы более или менее ответил на свой вопрос на этом!

Вот ваш ответ:

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

:before псевдо-элемент по существу выступает в качестве самостоятельного элемента в вашем DOM, что означает, что вы можете стиль его полностью отдельно от самого элемента. Таким образом, добавление font-size в .marker-check-mark:before не повлияет на размер шрифта .marker-check-mark.

ли прочитанный здесь для получения дополнительной информации о том, как все это работает: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Answer 2

Если я понимаю, что вы просите, вы хотите установить размер галочки? Почему бы просто не задать размер шрифта перед селектором?

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

FIDDLE