求助：如何用CSS实现带圆角的半词文本高亮效果

你之前用线性渐变没法实现圆角，是因为渐变属于背景图像，没法直接给它添加圆角属性。可以试试下面两种方法，轻松实现目标效果：

方法一：内联容器直接控制 #

给需要高亮的半词片段套一个<mark>标签，通过宽度和位移控制覆盖范围，再直接设置圆角和边框：

<p>这是一个需要<mark class="half-highlight">高亮</mark>的单词</p>

.half-highlight {
  display: inline-block;
  width: 50%; /* 仅占半个单词宽度 */
  line-height: 1.4;
  background: #ff0;
  border-radius: 4px; /* 实现圆角效果 */
  border: 1px solid #333; /* 添加边框 */
  box-sizing: border-box;
  transform: translateX(50%); /* 将高亮块偏移到单词后半段 */
}

方法二：伪元素后置高亮 #

如果不想改变文本的排版流，可使用伪元素定位在文本下方实现高亮：

<p>这是一个需要<span class="half-word">高亮</span>的单词</p>

.half-word {
  position: relative;
}
.half-word::after {
  content: '';
  position: absolute;
  top: 20%; /* 控制高亮区域的顶部位置 */
  bottom: 20%; /* 控制高亮区域的底部位置 */
  left: 50%; /* 从单词中间位置开始覆盖 */
  right: 0; /* 覆盖至单词末尾 */
  background: #ff0;
  border-radius: 4px;
  border: 1px solid #333;
  z-index: -1; /* 置于文字下方，避免遮挡文本 */
}

这两种方法都能精准实现半词高亮+圆角边框的效果，比线性渐变的方式更灵活可控。

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