Question

我有以下代码。当您单击它时（请在我的页面上即时运行内嵌onclick-设置正确），背景会向右扩展。

不幸的是，由于我在:before中使用display: inline-block，它影响了内部文本的布局。

它也受到我在包装盒上拥有的padding属性的影响。我可以通过在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>

Answer 2

不确定这是否是您要寻找的东西

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 3

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

这将导致如下代码：

:before

但是大多数可访问性硬件和软件都无法正确处理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" */ }。那么为什么不在div或span上设置背景呢？

:before

具有相同的背景效果，文字居中。

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

3 个答案: