表單加星號(hào)意思是必填項(xiàng)了，這種功能我們其實(shí)見得也是非常的多了，今天我們就一起來看一篇關(guān)于CSS 給表單必選項(xiàng)添加星號(hào)的例子，希望能夠?qū)Ω魑粠韼椭?/p>

在制作網(wǎng)頁表單的時(shí)候，如果一個(gè)選項(xiàng)是必填的，通常會(huì)給選項(xiàng)添加一個(gè)星號(hào)，比如 WordPress 的評(píng)論表單：

<p class="form-group">
 <label for="author">姓名</label> <span class="required">*</span>
 <input type="text" id="author" name="author" required="required" size="30" class="form-text">
</p>

然后給星號(hào)添加一點(diǎn) CSS 樣式：

.form-group span.required {
 color: #999;
 font-size: 150%;
}
CSS 給表單必選項(xiàng)添加星號(hào)

但是有些時(shí)候我們可能無法修改 HTML 結(jié)構(gòu)，或者不想添加多余無意義的標(biāo)簽，這時(shí)可以利用 CSS 的 after 偽類來制作出一個(gè)星號(hào)。

還是上邊的表單，刪除 <span class="required">*</span> 這段代碼，然后添加 CSS：

.form-group label:after {
 content: ' *';
 color: #999;
 font-size: 150%;
}

這樣就可以通過 CSS 來制作出一個(gè)代表必選的星號(hào)。

其實(shí) CSS 的 before 和 after 偽類是非常好用的，大多數(shù)人只是拿它來清除浮動(dòng)，其實(shí)腦洞開一下，好好利用這兩個(gè)偽類可以做出很神奇的事情。