Euro Symbol via CSS ausblenden?

[bkoenig]

Hallo zusammen,
ich habe folgendes "Problem": Ich möchte auf den Produktseiten unseres Online Shops testweise gerne das € Symbol ausblenden ohne dafür im eigentlichen Quellcode rumbasteln zu müssen.
Meine Hoffnung war nun, dass man das irgendwie mit CSS lösen kann. Quasi ein display:none für Euro Symbole.

Der Code für die Anzeige des Preises sieht so aus:
<span class="priceLabelPrice">86,90 €</span>

Das Euro Zeichen hat hier also leider keine eigene Klasse, die man ausblenden könnte.
Gibt es evtl. irgendeine andere Möglichkeit, dies möglichst einfach per CSS zu lösen oder müsste man das mit einem Script programmieren?

Beste Grüße

 

[AndreasB]

So einfach wird das nicht. Es gibt in CSS nicht die Möglich einen String zu zerlegen und einzelne Teile davon zu verstecken.

Wie soll es denn aussehen, wenn das Eurozeichen verschwunden ist? Was soll mit dem Platz geschehen?

Du könntest es zum Beispiel mit einem Pseudoelement verdecken, oder den Container so verkleinern, dass es abgeschnitten wird.

Für eine genauere Analyse wäre es gut, einen Teil des Markups mit dem orginal styling zu sehen.

 

[basti1012]

Mit Javascript geht es eigentlich recht einfach

var eurokill=document.querySelectorAll('.priceLabelPrice');
eurokill.forEach(function(h){
    h.innerText= h.innerText.replace(/€/g, '');
})

Bei Css gibt es first-letter , aber leider nicht last-letter , dann wäre es kein Problem.
Wie mein Vordermann schon sagte , einfach ein after nutzen und das Euro Zeichen zu decken.

.priceLabelPrice {
  position: relative;
}
.priceLabelPrice::after {
  bottom: 0;
  color: white;
  content: '€';
  position: absolute;
  background:white;
  transform: translate(-100%, 0);
}

 

[bkoenig]

Mit Javascript geht es eigentlich recht einfach

var eurokill=document.querySelectorAll('.priceLabelPrice');
eurokill.forEach(function(h){
    h.innerText= h.innerText.replace(/€/g, '');
})

Bei Css gibt es first-letter , aber leider nicht last-letter , dann wäre es kein Problem.
Wie mein Vordermann schon sagte , einfach ein after nutzen und das Euro Zeichen zu decken.

.priceLabelPrice {
  position: relative;
}
.priceLabelPrice::after {
  bottom: 0;
  color: white;
  content: '€';
  position: absolute;
  background:white;
  transform: translate(-100%, 0);
}

Super vielen Dank. Das mit dem :after ist ja im Endeffekt genau was ich wollte. Sicher nicht die eleganteste Variante, aber für einen A/B Test komplett ausreichend. Danke