css - 在填充区域内裁剪伪元素

Question

我有一个容器，它有一些顶部/底部填充 - 它不能被移除或换成边距。

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

黄色区域的存在只是为了表明绿色框有填充(我剪掉了背景)。

我遇到的问题是，当我在伪对象上使用 100% 的高度时，它会继承父项的完整高度，包括填充，但是我只希望我的边框元素与绿色框的高度相同。

我可以获取填充大小(并且我知道如何使用 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>