input:before input:after伪元素为什么无效(select check radio同理)

       今天在工作中需要对表单内必填字段的输入框前面加上*,由于不想通过代码增加元素,于是想到CSS的: before:after伪元素,遗憾的是并不支持。为什么不支持呢?首先看一下before的定义:在指定元素的内容之前插入内容。注意:是元素内容之前,而不是元素之前。而input并不是容器,所以没有内容之前一说,所以就无效了。

        我们用代码证明一下:

<!DOCTYPE html>
<html>
<head>
<style>
div:before
{
content:"我是:";
}
</style>
</head>


<body>
元素前面
<div>内容前面小书童</div>
 
</body>
</html>

浏览器显示结果如下图:

我们用浏览器F12调试看网页元素的结构如下图,很明显是再内容的前面,而不是元素的前面。




作者:奔跑的蜗牛 网址:http://www.itxst.com/detail/vqir6viz.html