CSS-常见的伪元素选择器的用法详解

本是古典 何须时尚 2023-08-17 17:03 249阅读 0赞

:before 与 :after 分别在被选择元素的内容之前和内容之后插入元素，所以必须在双标签中使用伪元素选择器，在单标签中无效；使用伪元素选择器时必须要设置 content 属性来指定要插入的内容，若内容为空将其属性值设置为 '' 空字符串即可；通过伪元素选择器插入的内容默认以行内元素的形式显示；想要使其成为块元素，通过样式属性 display 转换即可；为了与伪类选择器进行区分，通常在使用时用 :: 表示伪元素

::before

::before 选择器用于向选定的元素内容之前插入元素

::after

::after 用于向选定的元素内容之后插入元素

示例：

  1. div { 
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: red;
  5. }
  7. div::before { 
  8.     content: 'before';
  9. }
  11. div::after { 
  12.     content: 'after';
  13. }
  15. <div></div>

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读