CODEWITHSUNDEEP
css
Amin Karimi
Amin Karimi

Reputation: 83

Css before and after doesn't work correctly

When I change before content to arabic or persian like 'ریال', the before places right of span . But I want a code that doesn't change the place of currency anyway and any language. 

.price-value::before {
    content: 'ریال';
}
<span class="price-value">15.50</span>

Upvotes: 4

Views: 120

Answers (3)

Deepak Singh
Deepak Singh

Reputation: 94

.price::after {
content: 'ریال';
float: left;
margin-right: 5px;
}

<span class="price">15.50</span>

Try this

Upvotes: 0

Tham Deva
Tham Deva

Reputation: 64

.price-value::before {
content: 'ریال';
float: left;
margin-right: 2px;
}
<span class="price-value">15.50</span>

Its working fine. Please check it again. Otherwise send full code.

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

I think the browser aligns the text as per language but you can alwasy overwrite it using css

span {
  display: inline-block; /* to clear the float left/right */
  margin: 5px;
  border: 1px solid red;
}

[class*="price-value"]::before {
  float: left; /* change the value to float right if you want to align the text to right */
}

.price-value-1::before {
  content: 'ریال';
}

.price-value-2::before {
  content: '$';
}

.price-value-3::before {
  content: '£';
}
<span class="price-value-1">15.50</span>

<span class="price-value-2">15.50</span>

<span class="price-value-3">15.50</span>

Upvotes: 3

Related Questions