• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Решено Несколько цветов для подпункта меню

Moonlight31

Опытный
Доброго времени суток!
Столкнулся с такой проблемой, отдельному подпункту меню необходимо присвоить два цвета:
К примеру первая часть черным цветом, вторая красным.

Видеоуроки !Акция!

Как это возможно реализовать?
Спасибо за любой совет
 

Moonlight31

Опытный
Думаю можно подключить классы css для подпунктов, но как это сделать для двух цветов пока не представляю
 

Kvistis

Опытный
Местный
Попробуйте через :after
Код:
li#menu-item-262:after {
   content: "!Акция!";
   color: #990000;
}
Вместо li#menu-item-262 вставьте свой подпункт меню
 

Moonlight31

Опытный
Попробуйте через :after
Код:
li#menu-item-262:after {
   content: "!Акция!";
   color: #990000;
}
Вместо li#menu-item-262 вставьте свой подпункт меню
Спасибо! Получилось, только начинается с другой строки. Можно ли разместить контент на этой же строке?
 

Kvistis

Опытный
Местный
Можно ли разместить контент на этой же строке?
сделала через display: inline-block; в этот элемент и в элемент ссылки
Код:
li#menu-item-262:after {
   content: "!Акция!";
   color: #990000;
  display: inline-block;
}
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    display: inline-block;
}
 

Moonlight31

Опытный
как вариант: использовать что-то типа этого https://ru.wordpress.org/plugins/widgets-in-menu/ и добавить в меню виджет "текст" с таким примерно содержанием:
Код:
<a href="ссылка">Пункт меню <span color="red">!Акция!</span></a>
Сделал так) Спасибо!
Код:
<div class="select"><span style="color: #ffffff;">  ВИДЕОУРОКИ</span> <strong><span style="color: #ff0000;">!АКЦИЯ!</span></strong></div>
 
Сверху Снизу