Kann man das zweite Zeichen in einem Bereich mit CSS verstecken?

Question

Ich baue eine E-Commerce-Site mit Weebly, für den Einsatz in Frankreich.

Weebly, standardmäßig liefert die Preise in einem span-Tag:

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

Der Euro sollte kommen nach dem Preis, nicht vor wie der Dollar. Ich kann am Ende ein Eurozeichen mit dem Inhalt hinzufügen: "€", aber Ich muss das führende Eurozeichen loswerden.

Ich habe keinen Zugriff auf das Backend, um die Tags hinzuzufügen oder zu ändern - ich bleibe stecken, versuchen, den Inhalt des Tags über CSS (die ich weiß, ist Verboten) zu ändern.

Tragischerweise ist der Euro das zweite Zeichen und nicht das erste, also kann ich es nicht direkt manipulieren.

Eine mögliche Lösung wäre, den Inhalt des Span-Tags nach links zu verschieben, um das Euro-Zeichen abzuschneiden.

Andere Lösungen sind willkommen.

Ich bin nicht optimistisch, und da die Site-Vorlage bereits Tonnen von komplizierten Javascript hat, würde ich es vorziehen, eine Scripting-Lösung zu verwenden.

Bevor diese Frage als Duplikat-Kennzeichnung: Viele Leute haben gefragt, wie die ersten Worte in CSS usw.

Answer 1

Von this question zu manipulieren, konnte ich mein Problem vorübergehend mit diesem Code lösen:

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

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

Da es von Schriftgröße und -breite abhängig ist, ist es keine gute Lösung. Und in meinem Fall gibt es andere Fälle, in denen mehrere Preise im gleichen Bereich (€ 100 - € 200) liegen, die ich nicht beheben kann.

Answer 2

Hier ist eine Lösung, aber es erfordert <span> Block oder inline-block

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

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

Es wird nicht funktionieren mit mehreren Preisen zu machen. Ich denke, dass Sie Javascript benötigen, um das zu erreichen.