如何使用CSS实现元素前后文本标注及整体容器边框效果

安全阿岳

2026-9-26

方案选择建议

两种方案都可以实现你要的效果，优先推荐使用 ::before、::after 伪类为主的实现方式，理由如下：

自定义文本标注属于内容层元素，用伪类的 content 属性可以直接插入文本，后续修改文案、调整字体/颜色/大小等样式都非常方便，不需要额外切图，也不会出现缩放后模糊的问题
简单的边框装饰用伪类结合边框、背景色属性即可实现，通过父容器设置 position: relative，伪类设置 position: absolute 就可以精准控制文本和边框装饰的位置，适配不同尺寸容器时调整坐标参数即可
如果你的边框装饰是复杂纹理、渐变图案，也可以搭配 background 相关属性一起使用，两种方案并不冲突，可以结合实现更复杂的效果

简单实现示例

HTML 结构

<div class="decorated-box">
  容器内部内容
</div>

CSS 代码

.decorated-box {
  position: relative;
  padding: 24px 16px;
  margin: 20px 0;
  /* 基础边框样式 */
  border: 2px solid #222;
  border-radius: 6px;
}

/* 前置文本标注 */
.decorated-box::before {
  content: "前置标注";
  position: absolute;
  top: -10px;
  left: 20px;
  background: #fff;
  padding: 0 8px;
  font-size: 14px;
  color: #165DFF;
}

/* 后置文本标注 */
.decorated-box::after {
  content: "后置标注";
  position: absolute;
  bottom: -10px;
  right: 20px;
  background: #fff;
  padding: 0 8px;
  font-size: 14px;
  color: #165DFF;
}