css - 如何根据文本方向移动我的伪元素复选框？

Question

制作自定义外观复选框元素的常用方法是隐藏浏览器的默认复选框，并在复选框标签上为自定义外观的复选框创建一个伪元素:

.myclass::before {
    <Some styles for the custom looking checkbox>
}

通常呈现的 HTML 最终看起来像这样:

::before
<label class="myclass">text</span>

不过，我无法根据文本方向定位我的复选框。对于 ltr 语言(如英语)让复选框出现::在标签文本之前是有意义的，但它在 rtl 语言(如希伯来语)中看起来很尴尬。制作一个相同样式的::after 伪元素解决了我的问题，但我不知道如何根据文本方向仅将一种 CSS 样式应用于另一种样式。似乎没有任何方法可以单独在 CSS 中检测元素的计算文本方向 ( unless you're Firefox? )

有什么建议吗？

Answer 1

div{
  margin: 10px 10px 30px;
}
label{
  position: relative;
  cursor: pointer;
  display: block;
}
span{
  content: '';
  display: block;
  background: #fff;
  width: 15px;
  height: 15px;
  border: 1px solid red;
  position: relative;
  top: 20px;
}
label strong{
  color: #fff;
  display: block;
  position: relative;
  top: -15px;
}
input:checked + strong{
  color: red;
}

<div>
<label>
  <span></span>
  <input type="checkbox"> English 
  <strong>X</strong>
</label>
</div>

<div>
<label dir="rtl">
  <span></span>
  <input type="checkbox"> العَرَبِيَّة 
  <strong>X</strong>
</label>
</div>