html - 扩展线性渐变背景不受div布局影响

Question

我有以下代码。当您单击它时(请原谅即时的内联 onclick - 在我的页面上它设置得更合适)，背景向右扩展。

不幸的是，我使用的是 :before与 display: inline-block ，它正在影响里面文本的布局。

它也受到 padding 的影响我在盒子上的属性(property)。我可以通过设置负值 margin: -16px 来解决这个问题在 :before 上元素但是 :before 的高度元素熄灭:

div {
  border: 1px solid teal;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  padding: 16px;
}

div:before {
  display: inline-block;
  height: 100%;
  width: 5%;
  content: '';
  background: linear-gradient(130deg, lightblue 40%, white 0%);
  transition: .3s;
}

div.active:before {
  width: 200%;
  /* or 300% if you want the entire background to be "taken over" */
}

<div onclick="this.classList.toggle('active')">
  <span>Hi! I'm text! nice to meet you!</span>
</div>

---

这就是我希望它看起来的样子(这里看起来不错，因为没有文字妨碍，也没有 padding 属性——我的网页需要这两个属性):

div {
  border: 1px solid teal;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
}

div:before {
  display: inline-block;
  height: 100%;
  width: 5%;
  content: '';
  background: linear-gradient(130deg, lightblue 40%, white 0%);
  transition: .3s;
}

div.active:before {
  width: 200%;
  /* or 300% if you want the entire background to be "taken over" */
}

<div onclick="this.classList.toggle('active')">
</div>

---

有谁知道如何删除 :before从盒子的布局？理想情况下不使用 position在我的页面上，基于上面框中的一些父项，position变得有点“古怪”。但如果这是唯一的解决方案，那就这样吧。

Answer 1

只需在主要元素上制作背景并使用 background-size

div {
  border: 1px solid teal;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  padding: 16px;
  background-image: linear-gradient(130deg, lightblue 40%, white 0%);
  background-size:10% 100%;
  background-position:left;
  background-repeat:no-repeat;
  transition:background 0.5s;
}


div.active{
  background-size:300% 100%;
}

<div onclick="this.classList.toggle('active')">
  <span>Hi! I'm text! nice to meet you!</span>
</div>