深入理解CSS伪元素

html-css031

深入理解CSS伪元素,第1张

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

:first-letter

指定一个元素第一个字母的样式

注意1：所有前导标点符号应与第一个字母一同应用该样式

注意2：只能与块级元素关联

注意3：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因

:first-line

设置元素中第一行文本的样式

注意1：只能与块级元素关联

注意2：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因

:before(IE7-浏览器不支持)

在元素内容的最开始插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1：firefox浏览器需要添加-moz-前缀

注意2：只支持双冒号写法

注意3：只支持颜色和背景颜色两个样式

下面是伪元素的速查表

【content属性】

content属性应用于before和after伪元素

【1】 <string>里面的内容会原样显示，即使包含某种标记也不例外。

注意1：如果希望生成内容中有一个换行，则需要使用\A

注意2：若是一个很长的串，需要它拆分成多行则需要用\对换行符转义

【2】 <uri>

【3】attr( <identifier>)

<补充>【quotes属性】

管理引号

【4】open-quote|close-quote

【5】counter

首字下沉

钉子效果

图片叠加效果

在的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是必须要写的内容

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

附带一个链接 伪元素使用详解（超详细版） - 江南北 - CSDN博客