Web实现：图标加文字伪元素实现一般实现

65 阅读 0 评论 43 点赞

我是靠谱客的博主酷炫钢笔，最近开发中收集的这篇文章主要介绍Web实现：图标加文字伪元素实现一般实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

图标加文字的两种实现方式：
第一种方式：插入背景图

HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<span class="icon"></span>
<span class="words">主页</span>
</body>

</html>

CSS部分代码：

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
  background-size: contain;
  vertical-align: top;
  margin-right: 4px;
}
.words {
  font-size: 18px;
  line-height: 24px;
  
}

第二种方式：伪元素

HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<span>主页</span>
</body>

</html>

CSS部分代码：

span{
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  line-height: 24px;
  
}
span::before {
  content: '';
  position: absolute;
  left: 0px;
  width: 24px;
  height: 24px;
  background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
  background-size: contain;
}