css 多行文字后加图标

CSS 是网页开发中必不可少的一部分，它可以为网页添加各种样式。其中，多行的文字通常会让页面看起来比较乏味，但是我们可以用 CSS 来为其添加一些图标。

想要为多行文字添加图标，我们可以使用 CSS 的伪元素，如下所示：

p::after {
      content: "";
     /* 添加一个空的内容 */  display: inline-block;
     /* 显示为行内元素 */  width: 12px;
     /* 图标的宽度 */  height: 12px;
     /* 图标的高度 */  margin-left: 5px;
     /* 图标与文字的间距 */  background-image: url("icon.png");
     /* 图标的路径 */  background-size: contain;
 /* 图标的大小适应容器 */}
    

上述代码中，我们通过添加 ::after 伪元素来实现在多行文字后添加图标的效果。其中，“内容”（content）属性设置为空，这是为了让 ::after 伪元素显示，之后通过设置宽度、高度、间距和图片路径等属性来添加图标。

如果我们想要在多行的文字前面添加图标，也可以使用 ::before 伪元素，只需要将上述代码中的 ::after 改为 ::before 即可。

通过 CSS 添加图标可以让页面的排版更加美观，同时也能提高页面与用户的互动性。在开发网页时，我们可以多加尝试，通过不断的实践来提高自己的 CSS 技能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！