首先，大家可以使用CSS中的伪元素（pseudo-element）来创建图例。伪元素是指CSS中没有对应HTML元素的元素，常用的伪元素有“::before”和“::after”。例如，大家要在页面中添加一个包含文字和图例的按钮：
.btn {
background-color: #007bff;
color: #ffffff;
padding: 10px;
position: relative;
}
.btn::before {
content: "";
width: 20px;
height: 20px;
background-image: url("icon.png");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: -30px;
top: 50%;
transform: translateY(-50%);
}上述代码中，大家使用了伪元素“::before”来添加图例。首先，大家设置了元素的宽度和高度，然后指定了图例的背景图片。接着，大家将该元素定位为绝对定位，并将其向左移动了30个像素，并且将其垂直居中。最后，大家使用了CSS3中的transform属性来将该元素在垂直方向上向上移动了50%的高度。
另外，大家还可以使用CSS中的字体图标（icon font）来创建图例。字体图标是一种可以用字体来描述图标的技术，常见的字体图标库有FontAwesome和Iconfont。例如，大家可以使用FontAwesome库中的图标来添加图例：
上述代码中大家使用了FontAwesome图标库中的“heart”图标来创建图例。在HTML中，大家定义了一个“i”标签，并给它添加了“fa”和“fa-heart”两个类名。在CSS中，大家引入FontAwesome的样式文件，然后设置“i”标签的字体、颜色和大小。
总之，无论是使用伪元素还是字体图标，都可以帮助大家轻松地创建图例，增强网页的美观性和用户体验。