Zamiana pozycji input radio i label

Question

Cześć, kod poniżej wyświetla inputa po lewej a po prawej labelkę (○ test). Potrzebuję odwrócić sytuację (test ○). Niby łatwe zadanie, ale niestety z pewnych względów nie mogę zmienić struktury htmla, w związku z czym muszę to obejść za pomocą CSS. Niestety, wykracza to poza moje kompetencje. Jakieś pomysły?
 

<div>
  <label>
	<input type="radio" name="test" />
	test
	</label>
<div>

 

Answer 1

Poprawnym rozwiązaniem w tym wypadku jest float: https://jsfiddle.net/Comandeer/0jtgf8m5/

To rozwiązanie nie powoduje takich problemów, jak zapronowane z ::before:

• Tekst pozostaje zaznaczalny.
• Treść nie jest przerzucana do CSS-a.
• Czytniki ekranowe nie dostają podwójnej etykiety dla pola.

Comments

Dziękuję serdecznie

Answer 2

label {
  font-size: 0;
  width: 70px;
}
label::before{
  content: 'test';
  font-size: 16px;
}

Bardzo dziiwne zadanie :D

Comments

Dzięki wielkie, działa :) Niestety, input jest w globalnym frameworku i jest "zakaz" ruszania, niektórych korpo zakazów niestety nie da się ominąć

---

Przecież to bezsensowne rozwiązanie! Przez to tekst staje się nie do zaznaczenia. Tutaj o wiele lepiej sprawdziłby się zwykły float.

---

@Comandeer, czy każdy tekst musi być zawsze możliwy do zaznaczenia? Co jeśli chciałbym zrobić coś w stylu wyróżnionego napisu na obrazku w sklepie internetowym jak "promocja" przy użyciu before lub aftrer? Traktowałbym to jako czysto dekoracyjny element - czy w ten sposób jakoś "znika" on dla robotów/ czytników/ użytkowników? 

---

Jeśli coś jest częścią treści, nie powinno być dodawane przy pomocy CSS-a. Jeśli chodzi o czytniki, to większość czyta tekst wstawiony w ten sposób, ale roboty – raczej nie.