css - ラジオボタンを分割してグループ化を続ける方法

Question

私は JSF (および Seam、JBOSS など) に不慣れで、写真のように (赤いテキスト) 最初のラジオ ボタンと 2 番目のラジオ ボタンの間にテキストを追加するタスクを取得しました。

これは本当に私を困惑させます。これは達成可能ですか？今日では、ラジオ ボタンを (List<> から) 吐き出すだけです。

<h:selectOneRadio id="foobarAlternativRadio" value="#{foobarController.valdFoobarAlternativ}" layout="pageDirection" styleClass="radio" style="margin: 0" tabindex="#{nextTabIndex}" disabled="#{foobarController.visaAnnan}">
    <s:selectItems value="#{foobarController.foobarAlternativ}" var="alternativ" label="#{alternativ.itemLabel()}"/>
    <s:convertEnum />
</h:selectOneRadio>

JavaScript で解決するのは簡単ですが、JS なしで動作する必要があるため、オプションではありません。

私の質問:

• これはできますか？

もしそうなら：

• どのようなアプローチが必要ですか / どこから始めればよいですか? (ある種の独自のレンダリング構造を作成できますか?)

追加情報: JS を使用せずに IE6 以降の Web ブラウザーで動作するソリューションを考え出す必要があります。

編集:CSSは何らかの方法でこれを解決する方法ですか?