使用CSS3美化HTML表单的技巧演示

拟元素的内容是透过 content 属性来指定的，且一样能用 CSS 来装置它。

仔细看一下 DevTools 的画面：

虽然是叫 after，但其实是将元素产生并放置在 label 元素中，所以点击到该元素也等同点击到 label 元素。最后快来补上当 radio:checked 时的变化囉：

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1 input[type="radio"]:checked + label::after {   
 content: "Yes";   
 background: green;   
}  

如果想要改放在前方时，就改换成使用 ::before：

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1 label {   
 cursor: pointer;   
 display: block;   
 width: 120px;   
 position: relative;   
 line-height: 31px;   
 padding-left: 40px; /* 加上距离 */  
}   
.abgne-menu-20140109-1 label::before {   
 content: "No";   
 display: inline-block;   
 width: 25px;   
 height: 25px;   
 line-height: 25px;   
 border-radius: 50%;   
 padding: 3px;   
 color: #FFF;   
 background: #f00;   
 text-align: center;   
 position: absolute;   
 left: 0;   
}   
.abgne-menu-20140109-1 input[type="radio"]:checked + label::before {   
 content: "Yes";   
 background: green;   
}  

其中 lable 元素的 padding-left 是为了跟拟元素产生距离以免靠的太近太挤~

多选框的做法也是一样，只是将 radio 改成 checkbox 就可以了：

CSS Code复制内容到剪贴板

.abgne-menu-20140109-2, .abgne-menu-20140109-2 li {   
 list-style: none;   
 margin: 5px 0;   
 padding: 0;   
}   
.abgne-menu-20140109-2 label {   
 cursor: pointer;   
 display: block;   
 width: 120px;   
 position: relative;