Изменить псевдоэлемент из значения поля с помощью jQuery/JS?

Question

Я знаю, что jQuery не может напрямую манипулировать псевдоэлементами CSS, и я уже прочитал кучу сообщений здесь, которые не отвечают на мой вопрос.

Мне нужно изменить CSS псевдоэлемента со значением поля.

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

У меня есть основы сценария вниз, но я просто не могу заставить его изменять размер шрифта при каждом изменении. Например (#base_size является поле с целочисленным значением, в: прежде, чем это псевдо элемент, который вставлен значок):

$('#base_size').change(function() { 
    var baseSize = $(this).attr('value'); 
    document.styleSheets[0].insertRule('.item a:before { font-size:' + baseSize + 'px !important; }'); 
}); 

Этот конкретный JQuery будет изменить размер шрифта, но только в первый раз. Дальнейшие изменения в #base_size не влияют на псевдоэлемент, но каждое изменение создает новое правило CSS. Как ни странно, инструменты Chrome dev показывают «.item a :: before» (по одному для каждого изменения) с двумя двоеточиями и без деклараций.

Возможно, я ошибаюсь. Я буду очень благодарен за любую помощь!

Answer 1

Почему futz со стилями?

Попробуйте изменить CSS вместо:

$('#base_size').change(function() { 
    var baseSize = this.value; 
    $('.item a:before').css({ 'font-size': baseSize + 'px' }); 
});