::before伪类
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪元素</title><style type="text/css">div::before{content: "我最棒";}}</style></head><body><!--伪元素:文档结构中没有出现的元素--><!--::before 在元素内容之前添加新内容。必须配合content使用--><!--::after 在元素内容之后添加新内容。必须配合content使用--><!--可以把伪元素完全当成元素来设置样式使用--><div>我爱学习</div></body>
</html>
“ ::before ,::after伪类 ”:没有额外的添加页面结构,就可以把需要插入的内容插进去了(即在元素内容之前添加一个新的内容)
::after伪类:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪元素</title><style type="text/css">div::after{content: "我是奶龙";color: red;font-size: 12px;}}</style></head><body><!--伪元素:文档结构中没有出现的元素--><!--::before 在元素内容之前添加新内容。必须配合content使用--><!--::after 在元素内容之后添加新内容。必须配合content使用--><!--可以把伪元素完全当成元素来设置样式使用--><div>我爱学习</div></body>
</html>
可以把伪元素完全当成元素来设置样式使用(如这里的:“我是奶龙”)
div::after {
content: "我是奶龙";color: red;font-size: 12px;}