哇，这个标题看起来好高深啊！其实就是想说怎么让单选按钮被选中后在它旁边水平显示一些文本。这个功能听起来很简单， 简直了。 但要实现得漂亮又不容易出错呢！今天咱们就来聊聊这个事情，用最简单的话解释清楚。

单选按钮是什么东西？

先说说你要明白什么是单选按钮。就是那些圆圆的小按钮啦！你点一个，其他都不能点。比如性别选择：男、女、保密。你只能选一个嘛，中肯。！

HTML代码长啥样？

写HTML代码的时候，单选按钮用input标签，type属性设为radio。比如这样：，未来可期。

 男
 女

我要怎么让它显示文本啊？

现在问题来了：当我点击某个单选按钮时我想在它旁边显示一些文字提示。比如点击“男”， 离了大谱。 就显示“你选择了男”。这该怎么搞呢？有几种方法哦！

方法一：用CSS的:after伪元素

这个方法最简单啦！就是利用CSS的特殊功能:after来在元素后面添加内容。具体怎么做呢？看下面代码：

input:checked + label:after {
    content: "你选择了男";
    display: inline;
}

注意事项：

• content里面写的就是你想显示的文本啦！可以改成任何内容；
• :checked表示这个单选按钮被选中了；
• :after表示在被选中的按钮后面添加内容；
• display: inline是让文本和单选按钮排成一行。

方法二：用JavaScript控制显示隐藏div元素

警告！这里有复杂操作哦~新手慎入！

如果第一种方法不适合你， 或者你想更灵活地控制显示内容的话，可以使用JavaScript动态改变DOM结构。看下面例子:，总体来看...

Option 1