css 前后不能正常工作

Question

当我将内容更改为阿拉伯语或波斯语(如“ریال”)时，之前的内容位于 span 的右侧。但我想要一个无论如何都不会改变货币位置和任何语言的代码。

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

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

Answer 1

我认为浏览器会根据语言对齐文本，但您始终可以使用 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>