CSS中的content=“”

破晓的星辰
  • 122

有很多css里面有这样的语句

xxx:before {

content="";
...
...

}

这个有什么作用?我知道这个是在XXX的前面添加内容的,我只是不懂为什么很多CSS里面都像这样添加空内容,好像和float有关什么的,不是很懂

评论
阅读 1.5k
7 个回答

添加空内容的目的不是要要插入内容,而是想在这个DOM元素内模拟一个DOM元素,来完成一些CSS样式上的工作,这样可以不增加无用的DOM标签

清除float的浮动

:before 选择器在被选元素的内容前面插入内容。content里面写内容

在伪类选择器中,填充的内容。别如,p:before{content:"这里的文字将会出现在p标签内容额的前面"}

当你把content这句省略的话,before添加的那个元素即使加上高宽或其他什么,也无法让其起作用,html元素里面是看不到的,添加一个content空内容的话就可以看到作用了。
可能描述不太准确,大概是这个意思。

你可以把它视为一个标签,也可以把它视为一个标签的附加标签。
在有些时候,例如文字前后都加icon,与其写几个标签来控制不如用:before :after

宣传栏