如何自定义文本高亮矩形的位置、尺寸与方向？

嘿，我帮你搞定这个文本高亮的自定义需求！你想要调整「Software Engineer」的橙色高亮，让顶部停在文字40%高度的位置，底部延伸到文字下方还稍微往右扩一点，用CSS伪元素就能完美实现，比直接用background-color灵活多了。

修改步骤： #

1. 先给高亮文本的容器（.highlight）设置相对定位，这样我们可以基于它来定位高亮背景；
2. 用::after伪元素创建一个独立的高亮层，通过绝对定位精确控制它的位置和尺寸。

替换你的原有CSS代码： #

把原来的这段代码：

#ph-h1-container h1 .highlight {
background-color: rgb(255, 98, 0);
}

替换成下面这段：

#ph-h1-container h1 .highlight {
  position: relative;
  display: inline-block; /* 确保伪元素能精准包裹文字内容 */
}

#ph-h1-container h1 .highlight::after {
  content: '';
  position: absolute;
  top: 40%; /* 高亮顶部对齐文字高度的40%位置 */
  left: 0;
  right: -8px; /* 让高亮向右延伸8px，可按需调整数值 */
  bottom: -8px; /* 让高亮向下延伸8px，可按需调整数值 */
  background-color: rgb(255, 98, 0);
  z-index: -1; /* 把高亮层放在文字下方，避免遮挡文字 */
  transform: translateY(-50%); /* 让top的40%位置精准对应高亮的顶部边缘 */
}

参数调整说明： #

• 如果你想让高亮顶部更靠上/靠下，修改top的百分比数值（比如30%更靠上，50%更靠下）；
• 调整向右延伸的宽度：修改right的数值，负数越大延伸得越宽，正数则会缩小高亮范围；
• 调整向下延伸的高度：修改bottom的数值，负数越大延伸得越长，正数则会缩短高亮范围。

这样修改后，你就能得到完全符合需求的自定义高亮效果啦！

备注：内容来源于stack exchange，提问作者Jake Matthews