带:before伪类的div波浪线元素在真实移动端不显示求助

问题情况 #

用:before伪类结合text-decoration: wavy underline实现的动态波浪线，在浏览器开发者工具的移动端模拟模式下显示正常，但放到真实手机上就完全消失了。尝试调整宽度、display属性，也未修改媒体查询，问题仍未解决。

相关代码：

CSS #

.wavy-line {
  width: 150px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 120px;
}

.wavy-line:before {
  content: "xxxxxxxxxxxxxx";
  position: relative;
  top: -35px;
  color: transparent;
  width: calc(100% + 27px);
  font-size: 45px;
  text-decoration: wavy #194027 underline;
  animation: animate 1.5s linear infinite;
  -webkit-animation: animate 1.5s linear infinite;
}

@keyframes animate {
  0% {
    left: -0px;
  }
  100% {
    left: -45px;
  }
}

@-webkit-keyframes animate {
  0% {
    left: -0px;
  }
  100% {
    left: -45px;
  }
}

.wavy-line-green:before {
  text-decoration-color: #194027;
}

HTML #

<div class="wavy-line wavy-line-green"></div>

问题根源 #

核心问题是移动端浏览器对text-decoration: wavy的兼容性不足，尤其是iOS Safari、部分安卓原生浏览器，对伪元素+波浪下划线的组合渲染支持不完善。再加上依赖content: "xxxxxxxxxxxxxx"的字体下划线样式，不同设备字体差异直接导致渲染失效。

解决办法 #

办法1：改用SVG实现（推荐） #

SVG在移动端兼容性强，渲染稳定，还能保留动画效果：

1. 修改HTML结构：

<div class="wavy-line wavy-line-green">
  <svg viewBox="0 0 120 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,6 C15,0 35,12 60,6 C85,0 105,12 120,6" stroke="#194027" stroke-width="2" fill="none" />
  </svg>
</div>

2. 调整CSS实现动画：

.wavy-line {
  width: 150px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 120px;
}

.wavy-line svg {
  width: calc(100% + 40px);
  animation: animate 1.5s linear infinite;
  -webkit-animation: animate 1.5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40px);
  }
}

@-webkit-keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40px);
  }
}

办法2：修复原CSS的兼容性 #

如果坚持使用原实现方式，可尝试以下调整：

• 给伪元素添加display: inline-block，确保宽度和定位生效；
• 替换content为"~~~~~~~~~~~~~~~~~~~~"这类字符，避免透明文字导致的下划线渲染异常；
• 改用absolute定位，给父元素添加position: relative；
• 补全浏览器前缀：

.wavy-line {
  position: relative; /* 让子元素absolute定位基于当前容器 */
  width: 150px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 120px;
}

.wavy-line:before {
  content: "~~~~~~~~~~~~~~~~~~~~";
  position: absolute;
  top: 15px;
  left: 0;
  color: transparent;
  width: calc(100% + 27px);
  font-size: 45px;
  display: inline-block;
  /* 拆分text-decoration属性并补全前缀 */
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #194027;
  -webkit-text-decoration: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: #194027;
  animation: animate 1.5s linear infinite;
  -webkit-animation: animate 1.5s linear infinite;
}

验证提示 #

• 测试主流移动端浏览器：iOS Safari、安卓Chrome、原生浏览器；
• 尽量避免依赖字体的下划线样式，使用SVG这类独立图形实现，跨设备一致性更好。

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