我如何强制垂直flexbox中的（旋转）元素不重叠？

Question

我正在尝试在页面的左上角放置一些旋转的文本，并在所述文本的顶部添加一行like so。

我尝试通过使用垂直柔韧性盒来做到这一点。我假设通过将线绘制为div并在其后添加h3元素，间距将由flex box处理。供参考，下面是代码，>

<div style="display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            margin-right: 90%; 
            height: 100vw;
            width: auto;
            ">

            <hr style="transform: rotate(-90deg);
                       width: 9%;
                       position: fixed;">

            <h3 style="font-family: Italianno; 
                       font-size: 170% ;
                       transform: rotate(-90deg);
                       margin-top: 80%;" 
                       id="fancy-logo">

                Sorority
            </h3>

</div>
[不幸的是，当我调整页面大小时，最上面的行最终与单词重叠了？有关如何解决此问题的任何建议？

我正在尝试将一些旋转的文本放在页面的左上角，并在该文本的顶部添加一行，就像这样。我尝试通过具有垂直的弹性盒来做到这一点。我以为通过绘制...

Answer 1

[尝试使用:before伪类创建行，并使用writing-mode正确获取文本。

Answer 2

写作模式确实是一个很好的开始，并且flex在这里画出视觉线条也非常有用，但是要用伪代替hr