How can I move my pseudo element checkbox based on text direction? - css

Question

A common way to make a custom looking checkbox element is to hide the browser's default checkbox and create a pseudo element on the checkbox's label for your custom looking one:
.myclass::before {
<Some styles for the custom looking checkbox>
}
Usually the rendered HTML ends up looking something like this:
::before
<label class="myclass">text</span>
I am having trouble positioning my checkbox based on text direction though. For ltr languages (Like English) Having the checkbox appear ::before the label text makes sense, but it looks awkward in rtl languages (Like Hebrew). Making an identically styled ::after pseudo element fixes my problem, but I don't know how to only apply one CSS style over the other based on text direction. There doesn't seem to be any way in CSS alone to detect an element's computed text direction (unless you're Firefox?)
Any suggestions?

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>

Answer 2

I would add a class to the body element, say 'set-rtl'/'set-ltr', assuming you know you're on rtl mode, and then style your elements based on the body class.
In your example it will be:
.set-rtl .myclass::after{
<Some styles for the custom looking checkbox>
}
.set-ltr .myclass::before{
<Some styles for the custom looking checkbox>
}
Another option is to create a different CSS file for each mode.

Answer 3

So I had 2 problems.
My display style needed to be set to inline-block
I had to change my sudo-element's position from absolute, to relative which meant:
removing the initial label's padding (This was space that was set aside for the check box)
Add an equal amount of left and right padding to the check box
vertical-align: middle;
THEN the checkbox flowed ltr or rtl depending on the language just like it's text does.
Basically it boiled down to the fact that I was treating the checkbox as a very separate, specially handled thing.