CODEWITHSUNDEEP
csshiddenweebly
Andrew Swift
Andrew Swift

Reputation: 2237

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

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.

Upvotes: 1

Views: 859

Answers (2)

Banzay
Banzay

Reputation: 9470

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.

Upvotes: 2

Andrew Swift
Andrew Swift

Reputation: 2237

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.

Upvotes: 0

Related Questions