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

Question

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

不幸的是，当我使用 :before 和 display: inline-block 时，它影响了里面文本的布局。

它也受到我在盒子上的 padding 属性的影响。我可以通过在 :before 元素上设置负数 margin: -16px 来解决这个问题，但是 :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 有点 "funky." 但如果它是唯一的解决方案，那就这样吧。

Answer 1

不确定这是否是您要查找的内容：

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

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

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

div span{
  position:absolute;
  padding: 16px;
}

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

Answer 2

在不删除 :before 或不使用位置的情况下解决此问题的唯一方法是将文本添加到 :before 的 content 属性，

这将导致代码如下：

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

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

  div:before {
  display: inline-block;
  height: 100%;
  width: 100%;
  content: "Hi! I'm text! nice to meet you!";
  background: linear-gradient(130deg, lightblue 5%, white 0%); /*Or whatever width you like*/
  transition: .3s;
  text-align: center;
  line-height: 4;
  }

  div.active:before {
  width: 100%;
  background: linear-gradient(130deg, lightblue 75%, white 0%); /*Or whatever width you like*/
  /* or 100% lightblue if you want the entire background to be "taken over" */
  }

但是大多数可访问性硬件和软件都无法正确处理 :before。那么为什么不在 div 或跨度上设置背景呢？

CSS:
  span {
  width: 100%;
  background: linear-gradient(130deg, lightblue 5%, white 0%); /*Or whatever width you like*/
  transition: .3s;
  text-align: center;
  line-height: 4;
  }

  span.active {
  background: linear-gradient(130deg, lightblue 75%, white 0%); /*Or whatever width you like*/
  }

产生相同的背景效果，文本居中。

Answer 3

简单地在主要元素上制作背景并玩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>

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

Expanding linear-gradient background unaffected by div layout

html

css

linear-gradients