html - 如何强制垂直 flexbox 中的(旋转)元素不重叠？

Question

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

我尝试通过使用垂直 flexbox 来做到这一点。我假设通过将线绘制为 <b>div</b> ，并添加 <b>h3</b>之后的元素，间距将由 flexbox 处理。作为引用，这里是代码，

<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正确获取文本。

div {
  display: inline-block;
}

div:before {
  content: '';
  width: 1px;
  height: 100px;
  background: #000;
  display: block;
  margin: 0 auto;
}

h3 {
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding-bottom: 1em;
}

<div>
  <h3>
    Sorority
  </h3>
</div>