如何用CSS实现Elementor标题hover时仅文字填充而非容器？

要实现仅填充标题文字区域的悬停效果，只需调整CSS类的作用对象和参数，具体如下：

核心修改点 #

• 将CSS类直接应用到标题标签（而非外层容器）
• 使用相对单位适配文字高度，避免固定像素的局限性
• 让元素仅包裹文字内容，限制阴影作用范围

修改后的代码 #

CSS #

.da {
  display: inline-block; /* 元素仅包裹文字，不占满父容器宽度 */
  box-shadow: inset 0 -0.8em 0 -0.6em #028DB8; /* em单位随字号自动调整 */
  transition: box-shadow 0.45s ease-in-out;
  color: black;
  line-height: 1.2; /* 保持自然行高 */
}

.da:hover {
  box-shadow: inset 0 -1.2em 0 -0.6em #AED476; /* 阴影高度覆盖整个文字区域 */
}

HTML #

<html>
  <head>
  <title></title>
  </head>
<body>
<div>
    <h2 class="da">Simple Text</h2>
</div>
</body>
</html>

原理说明 #

1. display: inline-block：让标题元素收缩到仅包裹文字内容，box-shadow只会作用在文字所在的区域，不会延伸到整个容器。
2. em单位：阴影的高度基于文字字号计算，不管标题是大是小，阴影都能精准匹配文字高度，无需手动设置每个容器的内边距。
3. box-shadow参数调整：通过调整阴影的垂直位置和扩展半径，让初始的下划线阴影和悬停时的填充阴影都刚好贴合文字边界，视觉效果更自然。

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