css - 如何拆分单选按钮但保持分组

Question

我是 JSF(以及 Seam、JBOSS 等等)的新手，我得到了在第一个单选按钮和第二个单选按钮之间添加文本的任务，如图(红色文本)所示:

这让我很困惑。这是可以实现的吗？今天它只是吐出单选按钮(来自 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 和更新的网络浏览器一起工作的解决方案。

编辑:CSS 是一种以某种方式解决此问题的方法吗？

Answer 1

您可以使用 CSS 修复它。尝试这样的事情:

.radio:first-child:after {
    content: "Your content";
    color: #FF000;
}