：在具有父元素的滚动高度的元素之后

Question

我想给一个：在伪元素之后，纯css中溢出的UL元素的内容的高度。所以我试图获得scrollheight而不是纯css中的偏移高度。

有没有人有任何想法？

请将此小提琴视为参考： https://jsfiddle.net/vvb5sc31/6/

在文字中：

HTML：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CSS：

LI {
  height: 2em;
  line-height: 2em;
  list-style: none;
  background-color: red;
  padding: 4px;
}

UL {
  background-color: gray;
  position: relative;
  width: 10em;
  height: 100px;
  overflow: auto;

}
UL:after {
    background: blue;
    content: "";
    z-index: 12100;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    height: 100%;
}

Answer 1

您的<ul>标记的高度为100px，因此100％为100px，与<li>个子标记的数量无关。您的解决方案可以:after放在<li>元素而不是<ul>中：

https://jsfiddle.net/vvb5sc31/9/

 li { position:relative; }
 li:after { position: absolute; background:blue; /*** etc ***/ }