如何为H2元素制作响应式包裹型图形装饰框？

别担心！没专业编码培训经历完全没关系，咱们用纯CSS就能搞定这个包裹式装饰，还能完美适配文字换行的情况，再也不用纠结HTML嵌图片的问题啦~

方案一：左右侧图标包裹（适配多行文字） #

这种方案适合给标题左右加装饰图标，不管文字换多少行，图标都会和标题内容垂直居中，始终在整个标题块的两侧：

/* 选中首页第一个H2标题 */
body h2:first-of-type {
  /* 用flex布局让图标和文字对齐 */
  display: flex;
  align-items: center;
  /* 图标和文字之间的间距，可按需调整 */
  gap: 1rem;
  /* 可选：让标题居中显示，根据你的布局需求改 */
  justify-content: center;
}

/* 左侧装饰图标 */
body h2:first-of-type::before {
  content: '';
  /* 设置图标的尺寸 */
  width: 30px;
  height: 30px;
  /* 替换成你的装饰图路径 */
  background-image: url('你的左侧装饰图地址');
  background-size: cover;
  background-repeat: no-repeat;
}

/* 右侧装饰图标 */
body h2:first-of-type::after {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url('你的右侧装饰图地址');
  background-size: cover;
  background-repeat: no-repeat;
}

方案二：随文字宽度自适应的包裹（文字换行后装饰跟着收缩） #

如果想要装饰和文字内容紧密贴合，比如文字换行后，整个包裹块的宽度会跟着文字调整，那可以把H2改成inline-flex布局，还能加个背景增强包裹感：

body h2:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  /* 给标题加内边距和背景，强化包裹效果 */
  padding: 0.5rem 1rem;
  background-color: #f8f8f8;
  border-radius: 8px;
}

/* 左右装饰图标的代码和方案一一样，复制过来就行 */
body h2:first-of-type::before {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url('你的左侧装饰图地址');
  background-size: cover;
}

body h2:first-of-type::after {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url('你的右侧装饰图地址');
  background-size: cover;
}

为什么之前的HTML嵌图不行？ #

因为HTML里插入的图片是独立的元素，位置是固定的，当H2文字换行时，图片不会跟着标题的整体布局自动调整，很容易出现错位。而CSS伪元素是和H2元素绑定在一起的，会完全跟着H2的布局变化，完美适配各种换行场景~

小提示 #

• 装饰图尽量用SVG格式，矢量图缩放不会模糊，适配不同屏幕尺寸更友好
• 可以根据自己的网站风格，调整width、height、gap、padding这些数值，直到效果满意为止

内容的提问来源于stack exchange，提问作者Superdracula