css3 伪元素选择器 (做字体图标)

2020年6月14日作者张舫

常用伪元素选择器

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意

before和after必须有content属性
before在内容的前面,after在内容的后面
before和after创建一个元素,但是属于行内元素
因为在dom里面看不见css创建的元素,所以我们称为伪元素
伪元素和标签选择器一样,权重为1

如何用伪元素创建字体图标

1. 从阿里矢量图选择自己几个中意的图标,并且下载文件,打开文件点击Unicode,直接复制从字母e开始到分号之前的内容,如e605

e656等,前面的乱码是’\’的转义.

2. 开始使用伪元素选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1779380_ahof10civh.css">
    <style>
        /*添加的都是行内元素*/
        div::before {
            font-family: iconfont; /*不要忘记定义字体类型*/
            content: "\e605";      /*别忘加\ 反斜线转义*/
            font-size: 200px;
        }
    </style>
</head>
<body>


<div></div>

</body>
</html>

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Document</title>

<style>

/*添加的都是行内元素*/

div::before {

font-family: iconfont; /*不要忘记定义字体类型*/

content: "\e605"; /*别忘加\ 反斜线转义*/

font-size: 200px;

}

</style>

</head>

<body>

</body>

</html>

关于作者

张舫

好好学习天天向上

css3 伪元素选择器 (做字体图标)

常用伪元素选择器

如何用伪元素创建字体图标

关于作者

发表评论 取消回复

发表评论取消回复