css - 如何获得适合视口(viewport)的垂直线？

Question

我正在尝试制作一个可以用线条分隔此类内容的页面!见下图!

现在我尝试了很多使用空 div 的方法，但仍然会导致问题，因为它会占用整个页面。我也想过用hr标签，然后用transform属性旋转，还是不行!

这是整个事情的链接，很少有事情没有做， the project that I am trying to make!

这是我之前用过的部分代码

<hr id="sidebar">

    #sidebar {
        transform =  rotate(90deg);
    }

感谢任何帮助!

Answer 1

是的，您可以使用 :before 实现此设计。

请检查我的代码，如果您有任何问题，请回复我。

希望对您有所帮助。 :)

请试试这个 css。

    .slider:before {
        content: '';
        width: 1px;
        min-height: 100vh;
        background: #fff;
        position: absolute;
        left: 80px;
    }
    .slider {
        position: relative;
    }