SVG背景图标桌面端与标签重叠、移动端偏移问题求解

问题原因分析 #

当前代码里.info设置了固定宽高25px且overflow:hidden，直接把标签文本截断覆盖了；伪元素用绝对定位占满容器，没和文本做对齐处理，导致移动端布局时图标位置偏移。

具体修改方案 #

调整CSS布局，让图标和文本自然排列，同时保证不同屏幕下的对齐：

.info{
  position: relative;
  /* 去掉固定宽高，改用inline-flex实现图标+文本并排 */
  display: inline-flex;
  align-items: center; /* 垂直居中对齐图标和文本 */
  gap: 8px; /* 图标和文本之间留间距，避免拥挤 */
}
.info::after {
  content: ""; 
  display: block;
  /* 给图标设置固定尺寸，代替占满容器 */
  width: 25px;
  height: 25px;
  background-image: url(../../assets/icons/info.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(38%) sepia(80%) saturate(823%)
    hue-rotate(162deg) brightness(92%) contrast(97%);
  /* 去掉绝对定位，让伪元素作为inline-flex的子元素自然排列 */
}

修改说明 #

• 用inline-flex替代固定宽高，让容器根据内容自适应宽度，同时实现图标和文本的横向排列。
• align-items:center确保图标和文本在垂直方向上居中对齐，解决移动端可能出现的偏移问题。
• gap:8px给图标和文本添加间距，彻底避免重叠。
• 移除伪元素的绝对定位和容器的overflow:hidden，让元素按照正常文档流布局，适配不同屏幕尺寸。

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