关于伪元素的使用
在简书的vue前端开发中,遇到了一些问题,有一个是关于伪元素的使用的,关于伪元素,之前都没有听说过,这次
遇到了,查了一些资料,大概了解了一些基础用法,现在来做个记录
定义
伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由: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是必须要写的内容


这两张是我这次用来给一个字段添加中划线写的伪元素