Можно ли скрыть второй символ в промежутке с помощью CSS?

Question

Я создаю сайт электронной коммерции с Weebly, для использования во Франции.

Weebly, по умолчанию, обеспечивает цены в тег диапазона:

<span class="xxx"> €200.20 </span> 

Евро должен прийти после того, как цена, не до того, как доллар. Я могу добавить знак «Евро» в конце с контентом: «€», но Мне нужно избавиться от знака «Евро».

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

Трагически, евро является вторым персонажем, а не первым, поэтому я не могу напрямую манипулировать им.

Возможным решением было бы переместить содержимое тега span влево, отрезав знак Euro.

Другие решения приветствуются.

Я не оптимист, и поскольку на шаблоне сайта уже много сложного javascript, я бы предпочел избежать использования сценариев.

Перед маркировкой этого вопроса как дубликат: многие люди спрашивают, как манипулировать первые слова в CSS и т.д.

Answer 1

С this question, я был в состоянии решить мою проблему временно с этим кодом:

.xxx{ 
    position:relative; 
    left:-10px; 
} 

.xxx:before { 
    position: absolute; 
    width: 10px; 
    top:0; 
    bottom:0; 
    z-index:2; 
    background: white; 
    content:" " 
} 

Поскольку это зависит от размера и ширины шрифта, это не очень хорошее решение. И в моем случае есть другие случаи, когда в одном и том же промежутке есть несколько цен (€ 100 - € 200), которые я не смогу исправить.

Answer 2

Вот решение, но оно требует, чтобы сделать <span> блок или встроенный блок

.xxx:first-letter { 
 
    color: transparent; 
 
} 
 
.xxx { 
 
    display: inline-block; 
 
} 
 
.xxx:after { 
 
    content: "€"; 
 
}

<span class="xxx"> €200.20 </span>

Он не будет работать с несколькими ценами. Я думаю, для этого вам нужен javascript.