Can one hide the second character in a span with CSS?

Question

I am building an e-commerce site with Weebly, for use in France.

Weebly, by default, provides prices in a span tag:

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

The Euro should come after the price, not before like the dollar. I can add a Euro sign at the end with content: "€", but I need to get rid of the leading Euro sign.

I have no access to the backend to add or change the tags -- I'm stuck trying to change the content of the tag via CSS (which I know is verboten).

Tragically, the Euro is the second character and not the first, so I can't directly manipulate it.

A possible solution would be to shift the content of the span tag to the left, cutting off the Euro sign.

Other solutions are welcome.

I'm not optimistic, and since the site template already has tons of complicated javascript I'd prefer to avoid using a scripting solution.

Before marking this question as a duplicate: many people have asked how to manipulate first words in CSS etc.

score 2 · Answer 1 · answered Feb 10 '17 at 10:30

2

Here is a solution, but it requires to make <span> block or inline-block

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

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

It won't work with multiple prices. I think you need javascript to achieve that.

answered Feb 10 '17 at 10:30

Banzay

9,310
2
27
46

The problem is that the € is the SECOND character (after a space), so I can't use first-letter. But it would be a good solution in any other case. – Andy Swift Feb 10 '17 at 13:41

score 0 · Answer 2 · edited May 23 '17 at 12:17

From this question, I was able to solve my problem temporarily with this code:

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

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

Since it's dependent on font size and width, it's not a good solution. And in my case, there are other cases where there are multiple prices in the same span (€100-€200) that I won't be able to fix.

Can one hide the second character in a span with CSS?

2 Answers2