垂直线位于正文中的每个其他元素的顶部

Question

似乎没有通用解决方案的流行问题。我完成了一个网站，现在尝试在左边添加一条穿过整个页面的垂直红线。我希望它从边境向右边一点点。我的尝试是

body:after {
    content:"";
    position: absolute;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 2%;
    border-left: 2px solid red;
}

我是从here得到的。它部分工作。该行不会遍历整个页面。我不知道为什么。这是我试图将其应用到的网站（www.owk.co）。如果有人有时间查看index.html，则相应的github repo is here。感谢。

Answer 1

之所以发生这种情况，是因为它采取100％的窗口高度简易解决方案是将位置更改为position: fixed;

body:after {
    content:"";
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 2%;
    border-left: 2px solid red;
}

Answer 2

将位置更改为固定。

body:after {
    content:"";
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 2%;
    border-left: 2px solid red;
}