遇到了，查了一些资料，大概了解了一些基础用法，现在来做个记录
伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection
CSS伪元素是用来添加一些选择器的特殊效果。
ps：”first-line” 伪元素只能用于块级元素。
ps： 下面的属性可应用于 “first-line” 伪元素：
-font properties
-color properties
-background properties
-word-spacing
-letter-spacing
-text-decoration
-vertical-align
-text-transform
-line-height
-clear
ps： “first-letter” 伪元素只能用于块级元素。
ps： 下面的属性可应用于 “first-letter” 伪元素：
-font properties
-color properties
-background properties
-margin properties
-padding properties
-border properties
-text-decoration
-vertical-align (only if “float” is “none”)
-text-transform
-line-height
-float
-clear
需要注意的是，伪元素的使用，不需要在<body>里写，只需要在style里注明就好，content是必须要写的内容
这两张是我这次用来给一个字段添加中划线写的伪元素
附带一个链接 伪元素使用详解（超详细版） - 江南北 - CSDN博客
html使用伪元素给书名添加书名号：1、打开HBuilderX开发工具，创建Web项目并新建页面book.html。
2、打开已新建的book.html文件，修改title标签里面的内容。
3、在标签中，插入一个div标签，标签内部添加文字内容。
4、保存代码并运行项目，打开浏览器查看显示内容，可以发现文字内容由书名号包裹。
5、将div标签中的内容垂直放置，使用上下书名号，然后保存代码。
6、再次刷新浏览器，查看界面显示效果，可以发现上下书名号。
CSS3给伪元素before添加hover *** 作：
1、伪元素的由两个冒号“::”开头，然后是伪元素的名称 ，使用两个冒号是为了区别伪类和伪元素。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号的语法，但是CSS3中新增的伪元素必须使用两个冒号；
2、一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后，如果我们利用伪元素来进行动画设置，需要给父元素添加样式（position：relative）；给:after或者:before添加（position:absolute）；
3、某些内容时，只用在css样式表中利用:after与:before来输入内容样式，但更多的，可以结合伪类:hover 来设置动画样式。
这里要注意的是，这几个伪类如果同时出现在一个元素的 *** 作上，顺序不能改变，否则很大程度上会产生紊乱，效果不生效。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）