css伪元素
2020-06-07 本文已影响0人
黑木令
css 伪元素
详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结， 意在总结连贯提炼为一个系统的前端 CSS 知识体系, 有不足之处望大家指出, 如有想要了解的知识点可以
- ::first-lette
1. 用于向文本的 首字母 设置特殊样式
2. "first-letter" 伪元素只能用于块级元素 。
3. 代码示例:
p:first-letter {
color: #ff0000;
font-size:xx-large
}
Snip20200607_39.png
** 2. ::first-line*
1. 用于向文本的 首行 设置特殊样式 。
2. "first-line" 伪元素只能用于块级元素 。
3. 代码示例:
p:first-line {
color: #ff0000;
font-variant: small-caps
}
Snip20200607_40.png
** 3. ::before*
1. :before 和 :after 下特有的 content, 用于在 css 渲染中向元素逻辑上的头部或尾部添加内容 。
2. 这些添加不会出现在 DOM 中, 不会改变文档内容, 不可复制, 仅仅是在 css 渲染层加入 。
3. 所以不要用: before 或 after 展示有实际意义的内容, 尽量使用它们显示修饰性内容 。
4. 代码示例:
h1:before {
content: url(/i/w3school_logo_white.gif)
}
Snip20200607_42.png
** 4. ::after*
1. 代码示例:
h1:after {
content: url(/i/w3school_logo_white.gif)
}
Snip20200607_43.png
完整 html 文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-align: center;
background-color: yellowgreen;
line-height: 166px;
}
*/\* p:first-letter {*
*color: #ff0000;*
*font-size: 36px;*
*} \*/*
*/\* p:first-line {*
*color: blueviolet;*
*font-variant: small-caps*
*} \*/*
*/\* p::before {*
*content: 'before添加内容';*
*color: crimson;*
*} \*/*
p::after {
content: 'after 添加内容';
color: crimson;
}
</style>
</head>
<body>
<div>
<p> ---- p::after{} 也可设置我们的 icon 图片: content: url(/i/w3school_logo_white.gif) <br> 使用方式与 ::before 相同 </p>
</div>
</body>
</html>
