求助：如何通过CSS :after伪元素在A++文本末尾实现箭头样式

我在尝试通过CSS的:after伪元素给文本**A++**末尾添加箭头样式时遇到了问题，希望实现右侧带箭头的标签效果。现有代码如下，请问该如何实现？是否需要在.product-marker层级添加:before或:after伪元素？

现有CSS代码 #

.product-markers { position: static; display: block; overflow: hidden; bottom: 80px; right: -1px; width: auto; height: auto; opacity: 1; transition: opacity 0.2s linear 0s; }
.product-markers .product-marker { position: static; max-width: 100%; float: left; text-align: left; line-height: 10px; margin-bottom: 3px; padding: 0; border: none; left: 10px; bottom: 10px; height: auto; margin: 0; font-family: "HM Ampersand Bold", Arial, sans-serif; letter-spacing: 0px; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); color: #fff; text-transform: uppercase; }
.product-markers .product-marker.energy { --border-right: 20px solid #19945f; font-size: 11px; }
.product-markers .product-marker.energy .wrapper { background: #19945f; }
.product-markers .product-marker .wrapper { padding: 4px 0 5px; position: relative; left: 1px; }
.product-markers .product-marker.energy .wrapper .inner { position: static; display: block; overflow: hidden; padding: 10px; background: #19945f; }
.product-markers .product-marker .wrapper .inner { position: relative; left: 9px; }

现有HTML结构 #

<div class="product-markers">
  <div class="product-marker energy">
    <span class="wrapper">
      <span class="inner">A++</span>
    </span>
  </div>
</div>

解决方案 #

不需要改动HTML结构，我们可以在.product-marker.energy .wrapper元素上添加:after伪元素来实现箭头效果，这个容器是承载背景的最佳层级，定位和颜色匹配都更方便。

修改后的CSS代码（添加箭头样式） #

.product-markers { position: static; display: block; overflow: hidden; bottom: 80px; right: -1px; width: auto; height: auto; opacity: 1; transition: opacity 0.2s linear 0s; }
.product-markers .product-marker { position: static; max-width: 100%; float: left; text-align: left; line-height: 10px; margin-bottom: 3px; padding: 0; border: none; left: 10px; bottom: 10px; height: auto; margin: 0; font-family: "HM Ampersand Bold", Arial, sans-serif; letter-spacing: 0px; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); color: #fff; text-transform: uppercase; }
.product-markers .product-marker.energy { --border-right: 20px solid #19945f; font-size: 11px; }
.product-markers .product-marker.energy .wrapper { 
  background: #19945f; 
  position: relative; /* 为伪元素定位提供基准 */
  padding-right: 20px; /* 给箭头留出空间，避免文本被遮挡 */
}
/* 添加箭头的伪元素样式 */
.product-markers .product-marker.energy .wrapper:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* 用border绘制三角形箭头 */
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 12px solid #19945f;
}
.product-markers .product-marker .wrapper { padding: 4px 0 5px; position: relative; left: 1px; }
.product-markers .product-marker.energy .wrapper .inner { position: static; display: block; overflow: hidden; padding: 10px; background: #19945f; }
.product-markers .product-marker .wrapper .inner { position: relative; left: 9px; }

代码说明 #

1. 首先给.product-marker.energy .wrapper设置position: relative，作为伪元素的定位参考容器
2. 添加padding-right: 20px，给箭头留出足够的空间，防止文本和箭头重叠
3. 通过:after伪元素，利用border绘制三角形箭头：设置上下透明边框，左边框为和背景一致的绿色，形成向右的箭头
4. 用top: 50%和transform: translateY(-50%)让箭头垂直居中对齐容器

这样修改后，就能在**A++**文本的右侧生成和背景色匹配的箭头，达到你需要的效果。

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