Question

我有一个带有顶部/底部填充物的容器-无法将其删除或换成空白。

我正在尝试使用伪元素在绿色框的右侧创建一个人造边框（蓝线）。

仅存在黄色区域以表示绿色框具有填充（我已修剪了背景）。

我遇到的问题是，当我在伪对象上使用100％的高度时，它将继承父对象的整个高度（包括填充），但是我只希望我的border元素与绿色框的高度相同。 / p>

我可以获取填充的大小（并且我知道如何使用calc函数），但是由于填充是流畅的，因此会涉及大量的媒体查询，并且我正尝试避免这种填充。

因此，我想知道是否还有其他方法可以使蓝色边框与绿色框的高度相同。

.container {
  margin: 25px;
}

.box-wrapper {
  background-color: yellow;
}

.box {
  box-sizing: border-box;
  height: 200px;
  width: 200px;
  padding: 40px 0;
  background-color: lime;
  background-clip: content-box;
  position: relative;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 5px;
  background-color: blue;
  right: -20px;
}

<div class="container">
  <div class="box-wrapper">
    <div class="box"></div>
  </div>
</div>

Answer 1

您可以继承相同的填充并剪切背景：

.container {
  margin: 25px;
}

.box-wrapper {
  background-color: yellow;
}

.box {
  box-sizing: border-box;
  height: 200px;
  width: 200px;
  padding: 40px 0;
  background-color: lime;
  background-clip: content-box;
  position: relative;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  top:0;
  height: 100%;
  width: 5px;
  background-color: blue;
  background-clip: content-box;
  padding:inherit;
  box-sizing: border-box;
  right: -20px;
}

<div class="container">
  <div class="box-wrapper">
    <div class="box"></div>
  </div>
</div>

在填充区域内剪辑伪元素

1 个答案: