CSS效果只填充文本而不填充框

xt0899hw 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(330)

我尝试用css类给Elementor标题加下划线，并在悬停时从底部填充颜色。下面的代码填充了整个框。我如何限制它只填充标题而不自定义调整每个框的填充？谢谢!
正如上文所述。

.da {
  box-shadow: inset 0 -8px 0 -1px #028DB8;
  transition: box-shadow .45s ease-in-out;
  color: black;
  line-height: 40px;
}

.da:hover {
  box-shadow: inset 0 -40px 0 -1px #AED476;
}

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

css

来源：https://stackoverflow.com/questions/74962257/css-effect-fill-only-the-text-not-the-box

1条答案

按热度按时间

flseospp1#

只需在h2元素上使用动画。删除line-height并添加display:inline-block，以便h2元素的widht与文本长度完全相同

h2 {
  box-shadow: inset 0 -8px 0 -1px #028DB8;
  transition: box-shadow .45s ease-in-out;
  color: black;
  display:inline-block;
  /*line-height: 40px;*/
}

h2:hover {
  box-shadow: inset 0 -40px 0 -1px #AED476;
}

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

赞(0）回复(0）举报 2023-01-03

我来回答

CSS效果只填充文本而不填充框

1条答案

相关问题

热门标签

最新问答