Css 如何根据文本方向移动伪元素复选框？

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

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

.myclass:：before{
}

通常，呈现的HTML最终会显示如下内容：

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

：：之前
文本

但是，我无法根据文本方向定位复选框。对于ltr语言（如英语），在标签文本有意义之前显示复选框：：，但在rtl语言（如希伯来语）中它看起来很笨拙。创建一个样式相同的：：after伪元素可以解决我的问题，但我不知道如何根据文本方向只应用一种CSS样式。单凭CSS似乎无法检测元素的计算文本方向（）

---

有什么建议吗？

我会在body元素中添加一个类，比如“set-rtl”/“set-ltr”，假设您知道自己处于rtl模式，然后根据body类设置元素的样式

在您的示例中，它将是：

.set-rtl .myclass::after{
    <Some styles for the custom looking checkbox>
}

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

.set rtl.myclass:：after{
}
.set ltr.myclass:：before{
}

另一个选项是为每个模式创建不同的CSS文件。

div{
利润率：10px 10px 30px；
}
标签{
位置：相对位置；
光标：指针；
显示：块；
}
跨度{
内容：''；
显示：块；
背景：#fff；
宽度：15px；
高度：15px；
边框：1px纯红；
位置：相对位置；
顶部：20px；
}
标强{
颜色：#fff；
显示：块；
位置：相对位置；
顶部：-15px；
}
输入：选中+强{
颜色：红色；
}

英语
X
العَرَبِيَّة 
X

所以我有两个问题

我的显示样式需要设置为内联块

我必须将sudo元素的位置从绝对更改为相对，这意味着：

• 删除初始标签的填充（这是为复选框留出的空间）
• 在复选框中添加等量的左右填充
• 垂直对齐：中间对齐

然后，复选框根据语言的不同而显示ltr或rtl，就像文本一样

---

基本上，这归结为这样一个事实，即我将复选框视为一个非常独立的、经过特殊处理的东西。

我一直试图避免使用JS跟踪文本方向。我喜欢偏离计算文本的方向。文本对齐：开始/结束；在我开始使用sudo元素之前，我一直很好地为我服务。我不确定我是否理解。如果你为ltr和rtl设计了不同的页面样式，你必须在某个点上决定你使用的方向，在这一点上，向正文中添加一个类，无论它是在后端呈现的HTML还是像Angular/React这样的动态前端…请向我们展示你的实际CSS，我从来都不需要这种解决rtl相关问题的方法