<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c5w3jh');
src: url('fonts/icomoon.eot?c5w3jh#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?c5w3jh') format('truetype'), url('fonts/icomoon.woff?c5w3jh') format('woff'), url('fonts/icomoon.svg?c5w3jh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: "icomoon";
position: absolute;
top: 6px;
right: 8px;
}
div,
p {
position: relative;
width: 150px;
height: 30px;
border: 1px solid #000;
}
/* P::after {
content: '';
font-family: "icomoon";
position: absolute;
top: 6px;
right: 8px;
} */
P::after {
content: '\ea50';
font-family: "icomoon";
position: absolute;
top: 6px;
right: 8px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<!-- 用伪元素选择器 -->
<p></p>
</body>
</html>
<!-- 回忆:
早先作图标icomoon的步骤:
1.设置一个div并在div中设置一个span标签用于放图标
2.打开https://icomoon.io/app/#/select,选择标签
3.保存下载的标签并解压。找到demo.html页面复制要用的标签
4.将标签放到span之中。并赋值icomoon中第一段代码。
5.将5中复制代码放到style中,并给span标签定位
6.根据子绝父相,给div定位
对比
用伪元素选择器的优点是不用其他盒子承载图标,因为为类选择器就相当于是盒子 -->
CSS3_伪类选择器
最新推荐文章于 2024-09-15 23:04:16 发布