如何使用CSS结合伪类（pseudo classes）实现带文本的圆形、箭头及线条？

嘿，我来帮你搞定这些CSS效果！用伪类（:before、:after）确实能轻松实现你要的圆形、箭头和线条，而且不用额外的HTML元素，非常简洁。下面分模块给你详细的实现方案：

根据使用场景，分两种常见实现方式：

情况1：文本内嵌在圆形中 #

把伪类生成的圆形作为背景，文本叠加在上方：

.circle-inner-text {
  position: relative;
  display: inline-block;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}

.circle-inner-text:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #2563eb;
  z-index: -1; /* 让圆形在文本下方 */
}

对应HTML：

<span class="circle-inner-text">NEW</span>

情况2：圆形作为装饰，文本在旁侧 #

用Flex布局对齐圆形和文本，伪类单独生成圆形装饰：

.circle-side-text {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
}

.circle-side-text:before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ef4444;
}

对应HTML：

<div class="circle-side-text">未读消息</div>

箭头的核心是利用CSS border的透明特性绘制，完全不需要图片：

实心向右箭头 #

.arrow-right {
  position: relative;
  padding-right: 1.5rem; /* 给箭头预留空间 */
  color: #1e40af;
}

.arrow-right:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* 用border组合出箭头形状 */
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #1e40af;
}

对应HTML：

<span class="arrow-right">查看更多</span>

带边框的向下箭头 #

通过两个伪类叠加，模拟出边框箭头的效果：

.arrow-down-bordered {
  position: relative;
  padding-bottom: 1rem;
  font-size: 1rem;
}

.arrow-down-bordered:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid #1e40af;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.arrow-down-bordered:before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  /* 用白色覆盖中间区域，形成边框感 */
  border-top: 6px solid #fff;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

对应HTML：

<div class="arrow-down-bordered">下拉展开</div>

伪类非常适合做标题分隔、内容分割线这类效果：

标题下方的短线条 #

.title-with-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}

.title-with-line:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #f59e0b;
}

对应HTML：

<h2 class="title-with-line">我的标题</h2>

文本两侧的对称线条 #

用Flex布局让线条自动填充剩余空间，实现对称效果：

.text-with-lines {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  color: #6b7280;
}

.text-with-lines:before,
.text-with-lines:after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #d1d5db;
}

对应HTML：

<div class="text-with-lines">或者</div>

小技巧提醒 #

• 伪类必须设置content属性（哪怕是空字符串''），否则不会显示；
• 使用position: absolute时，父元素一定要加position: relative，避免伪类脱离文档流定位；
• 调整border-width、width、height可以快速修改形状大小，修改颜色属性就能切换主题色。

如果有特定的样式需求（比如渐变圆形、箭头动画），随时告诉我细节，我再帮你调整！

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