CSS3_伪类选择器

最新推荐文章于 2023-04-20 16:27:30 发布

一只追求学习的学渣

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量130

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44079801/article/details/106968113

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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定位
对比
用伪元素选择器的优点是不用其他盒子承载图标，因为为类选择器就相当于是盒子 -->

一只追求学习的学渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3_伪类选择器

<!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 {
复制链接

扫一扫