CSS伪元素用于向某些选择器设置特殊效果

语法格式:元素::伪元素(element::pseudo-element)

 

1.first-line:根据first-line伪元素的样式对element元素的第一行文本进行格式化,first-line伪元素只能用于块级元素

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

2.first-letter:用于向文本的首字母设置特殊样式,first-line伪元素只能用于块级元素

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

3.before:在元素的内容前面插入新的内容,常用content配合使用

1.使用before过后,before将成为第一个子元素

2.新元素为行级元素

3.内容通过content写入

4.在html结构中找不到该标签,只有在浏览器中才能找到

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

4.after:在元素的内容后面插入新内容,常用content配合使用,多用于清除浮动

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

清除浮动案例:

结构:

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

传统清除浮动的方式,需要多写一个空标签

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

使用after清除浮动

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

5.selection:用于在浏览器中选中文本后的背景色和前景色

五十一:CSS3之基本选择器之伪元素

五十一:CSS3之基本选择器之伪元素

 

相关文章:

  • 2021-05-19
  • 2022-12-23
  • 2022-01-22
  • 2021-12-04
  • 2022-12-23
  • 2021-12-06
  • 2021-12-06
猜你喜欢
  • 2021-08-20
  • 2021-11-14
  • 2022-12-23
  • 2021-12-26
  • 2021-06-25
  • 2021-08-22
  • 2021-11-13
相关资源
相似解决方案