Вы можете изменить цвет символа "-" с помощью CSS, используя селектор `::after` или `::before`, чтобы добавить новый контент после первого элемента. Однако в вашем случае мы можем воспользоваться другим подходом: использовать селектор родительских элементов и стилизовать текст, который находится прямо между двумя элементами.
Вот один из способов, как это можно сделать с помощью CSS:
1. Вы можете воспользоваться селектором для выбора родительского элемента и воспользоваться `::after` или `::before`, чтобы добавить дефис, стилизовав его цвет:
```css
.price::after {
content: " – "; /* или содержимое с нужным символом */
color: red; /* Установите нужный цвет */
}
```
2. Если вам важен именно существующий символ "-", вы можете скрыть его с помощью `color: transparent;` и добавить новый символ с нужным цветом:
```css
.price-amount:first-of-type::after {
content: "–"; /* добавляет дефис после первой суммы */
color: red; /* Установите нужный цвет */
}
.price-amount:first-of-type {
color: transparent; /* Скрывает оригинальный дефис */
}
```
Таким образом, на глаз он останется на месте, но будет отображаться в нужном цвете.
Учтите, что это способы обхода, если к прямому выбору символа через CSS подходов нет, так как CSS не позволяет выбрать отдельные символы внутри текста.