如何为换行的锚点（anchor）元素设置样式？

你的问题出在绝对定位的伪元素是单一矩形块，它只能覆盖锚点元素的整体容器区域，无法适配多行文本的每行布局，所以换行后样式只在两行垂直重叠的部分显示。

下面提供两种可行的解决方案：

方案一：使用背景渐变模拟样式（兼容性好） #

通过线性渐变背景实现跟随每行文本的下划线/高亮效果，无需依赖伪元素的绝对定位：

a {
  text-decoration: none;
  word-wrap: break-word;
  border: 1px solid black;
  /* 初始状态：每行底部显示6px橙色线条 */
  background-image: linear-gradient(transparent, transparent calc(100% - 6px), orange calc(100% - 6px), orange);
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

a:hover {
  /* hover状态：每行背景填充95%高度的橙色 */
  background-image: linear-gradient(orange, orange 95%, transparent 95%, transparent);
  transition: background .3s ease-in-out;
}

方案二：使用box-decoration-break复制伪元素 #

利用box-decoration-break: clone让伪元素在每行文本上都复制一份，适配多行布局：

a {
  text-decoration: none;
  word-wrap: break-word;
  position: relative;
  border: 1px solid black;
  display: inline;
  /* 让元素的装饰（伪元素）在每行都复制 */
  box-decoration-break: clone;
}

a::before {
  content: '';
  background: orange;
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 6px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

a:hover::before {
  bottom: 0;
  height: 95%;
}

两种方案都能实现：文本不换行时样式正常，换行后每行都能正确显示对应的橙色下划线或hover高亮效果。

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