伪元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染CSS的时候画上去的,所以在浏览器查看元素上是看不到伪元素的HTML结构的。
before 和 after 顾名思义就是附着在元素前后的伪元素。
默认情况下伪元素是行内显示的,想让它呈现出不同的效果的话,就需要设置它为块 {display:block} 显示。
伪元素可以使用content属性去指定元素的内容。
1."string" 字符串
li::after {content: '/';}
"string" 字符串内容会直接显示在页面当中,如果你字符串中填写html标签的话是不会被解析的。
2.attr()
a:after { content:"(" attr(href) ")"; }
attr() 它可以调用当前元素的属性进行显示
3.url
li::after { content: url(bg.png)}
url 用于引用图片,或是 css 渐变属性。
4.counter 调用计数器
li::before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
counter 调用计数器,可以不使用列表元素实现序号功能。