今天在工作中需要对表单内必填字段的输入框前面加上*,由于不想通过代码增加元素,于是想到CSS的: before:after伪元素,遗憾的是并不支持。为什么不支持呢?首先看一下before的定义:在指定元素的内容之前插入内容。注意:是元素内容之前,而不是元素之前。而input并不是容器,所以没有内容之前一说,所以就无效了。
我们用代码证明一下:
<!DOCTYPE html>
<html>
<head>
<style>
div:before
{
content:"我是:";
}
</style>
</head>
<body>
元素前面
<div>内容前面小书童</div>
</body>
</html>
浏览器显示结果如下图:
我们用浏览器F12调试看网页元素的结构如下图,很明显是再内容的前面,而不是元素的前面。