cssである要素の指定の仕方がわからない

現在、ラジオボタンのデザインを変更したいと思っています。
その中で、以下ソースコードにてlabelタグの内容(S,M,L)をcssで指定したいのですが、どうやって指定したらいいのかわからないので質問させていただきます。
なお、ソースコードは訳あっていじることができません。
初学者ゆえ簡単な質問かもしれませんが、ご回答お願いいたします。

ソースコード

html
1<form>
2  <label>
3    <input name="hoge" type="radio">
4    S　     <-　ここを指定したい
5  </label>
6  <label>
7    <input name="hoge" type="radio">
8    M
9  </label>
10  <label>
11    <input name="hoge" type="radio">
12    L
13  </label>
14</form>

行動規範の内容に同意します

回答1件

ベストアンサー

CSSで何を変えたいのか不明ですが、HTMLコードをいじらずJavaScriptも使わずということであれば要素セレクタでスタイルを指定するしかないのでは。

CSS
1label {
2  color: red;
3  font-size: 90px;
4  margin-right: 40px;
5}
6
7label::after {
8  content: '????';
9  color: green;
10  font-size: 30px;
11}

ただHTMLをいじれないのにCSSをどうやって適用するのか疑問ですが…。

で、

labelタグの内容(S,M,L)をcssで指定したい

ということなんですが、HTMLに書いてある S M L を消して違う内容を表示させたいということなら、力技にはなりますが

CSS
1label {
2  font-size: 0;
3  visibility: hidden;
4}
5
6input {
7  visibility: visible;
8}
9
10label:nth-of-type(1):after {
11  visibility: visible;
12  font-size: 20px;
13  content: '小';
14}
15
16label:nth-of-type(2):after {
17  visibility: visible;
18  font-size: 20px;
19  content: '中';
20}
21
22label:nth-of-type(3):after {
23  visibility: visible;
24  font-size: 20px;
25  content: '大';
26}