如何在带comparisonbox__tip类的div中插入对应增减状态的箭头图标？

以下方案均可实现将increase/decrease文字替换为对应箭头图标的需求：

方案1：CSS伪元素实现（无需修改HTML结构，推荐） #

仅需在现有CSS代码基础上追加以下样式，会自动在文字前插入对应箭头，不需要额外修改HTML代码：

/* 下降状态（红色）前面加向下箭头 */
.comparisonbox__tip-red::before {
  content: "↓";
  margin-right: 6px;
  vertical-align: middle;
}
/* 上升状态（绿色）前面加向上箭头 */
.comparisonbox__tip-green::before {
  content: "↑";
  margin-right: 6px;
  vertical-align: middle;
}

如果想要箭头放在文字后面，把::before改成::after，同时把margin-right改成margin-left即可。你也可以用Unicode编码替换字符获得更好的兼容性：向下箭头对应\2193，向上箭头对应\2191。

使用该方案时，直接删除div中原本的increase/decrease文字，仅保留数值即可。

方案2：直接在HTML中插入图标 #

你可以直接在div内部插入箭头字符或者内联SVG图标，灵活度更高：

字符图标示例（React写法）： #

{/* 上升状态 */}
<div className="comparisonbox__tip comparisonbox__tip-green">
  ↑ 25%
</div>

{/* 下降状态 */}
<div className="comparisonbox__tip comparisonbox__tip-red">
  ↓ 18%
</div>

内联SVG示例（可自定义大小样式）： #

<div className="comparisonbox__tip comparisonbox__tip-green">
  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" style={{marginRight: '4px', verticalAlign: 'middle'}}>
    <path d="M7 2L13 8H9V13H5V8H1L7 2Z"/>
  </svg>
  25%
</div>

使用currentColor可以自动继承当前文字的颜色，不需要额外给SVG设置颜色。

方案3：字体图标复用 #

如果你的项目已经接入了字体图标库（比如Iconfont、Font Awesome等），直接插入对应图标类名即可：

<div className="comparisonbox__tip comparisonbox__tip-green">
  <i className="iconfont icon-arrow-up" style={{marginRight: '4px'}}></i>
  25%
</div>

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