内容生成 content : 配合 :before 或 :after伪元素，插入生成内容

最新推荐文章于 2025-06-25 19:43:05 发布

原创最新推荐文章于 2025-06-25 19:43:05 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS的伪元素:before和:after结合content属性来实现文本和图片的内容生成，通过实例展示了如何为不同元素添加特定的前缀文本。

1、什么是内容生成
通过css 向元素的前面或后面增加一部分内容
2、伪元素
:before 匹配到某一元素的最前面
p:before
:after 匹配到某一元素的最后面
p:after
3、内容生成
content : 配合 :before 或 :after伪元素，插入生成内容
content的常用取值:
1、字符串:纯文本，插入到指定的位置处
p:before{
       content:"至尊宝:";
   }
2、url:生成的图像
a:before{
       content:url(Images/i1.jpg);
   }

修改前的样子：

修改后的样子：

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> 内容生成 </title>
  <meta charset="utf-8"/>
  <meta name="HSW" content="">
  <meta name="Keywords" content="">
  <style>
	div.lw:before {
		content:"老王:";
		padding-right:5px;
	}
	div.xm:before {
		content:"小明";
		padding-right:5px;
	}
  </style>
   <!-- 
	1、lw 的前面 要添加 老王:
	2、xm 的前面 要添加 小明:
	3、:与其他文本要有5px间隔
	   老王: 今天有.....
	-->
 </head>

 <body>
  <div class="lw">
	今天下午有时间吗?
  </div>
  <div class="xm">
    你要干什么?
  </div>
  <div class="lw">
	我妹来了，今天下午去接我妹，行吗?
  </div>
  <div class="xm">
	我去，接你妹!
  </div>
  <div class="lw">
	你妹的。
  </div>
 </body>
</html>