使用文本和伪元素旋转 div？

Question

我一直在研究如何将带有数字文本的 div 和样式化为一行的 ::after 伪元素旋转。基本上我已经尽可能地水平排列它（响应屏幕宽度），但我希望文本旋转 -90 度，粘在其容器的左侧，并且该行占据容器的剩余高度（但不要离开容器）。

应该是这样的：

p {
  display: flex;
  align-items: center;
  font-size: 10vw;
  font-weight: bold;
  margin: 0;
}

p::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 2px;
  background-color: #000;
}

<div class="container">
  <div class="num">
    <p>01</p>
  </div>
</div>

我已经尝试添加一个带有旋转和平移的转换属性，混淆了书写模式属性，但似乎无法让伪元素随着高度的变化而动态地延长（因为容器的高度随屏幕尺寸变化）。有什么建议吗？

Answer 1

想通了，这是解决这个奇怪的特定问题的人的解决方案（采用 flexbox 样式）。

section {
  display: flex;
  background-color: blue;
}

.wrapper-section {
  display: flex;
}

.section-sum {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.vt-line {
  height: 100%;
  width: 2px;
  background-color: #262525;
  margin: 0 auto;
}

.num p {
  display: inline-block;
  align-items: center;
  font-size: 5em;
  font-weight: bold;
  margin: 0;
  transform: rotate(-90deg);
}

.wrapper-aboutinfo {
  display: flex;
  align-items: center;
}

.container-aboutimg img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

 <section id="about">
  <div class="wrapper-section">
    <div class="section-sum">
      <div class="vt-line"></div>
      <div class="num">
        <p>01</p>
      </div>
    </div>
    <div class="wrapper-aboutinfo">
      <div class="container-aboutimg">
        <img src="https://images.pexels.com/photos/3861964/pexels-photo-3861964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>
      <div class="info-about">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat pretium pharetra. Aliquam non ultrices neque. Praesent rhoncus sapien vitae sem ultrices, ut malesuada magna consequat. Mauris eu laoreet justo. Integer tristique porta nibh vitae ultrices. Praesent porta ligula ut nisl pellentesque congue. Sed finibus ut est et lobortis. Pellentesque velit magna, sagittis non lorem at, pulvinar tempor sem. Nam iaculis nisi nec elit efficitur, non varius sapien feugiat.
        <br>
        <br>
Morbi justo arcu, rhoncus non sagittis eu, faucibus id ipsum. Vivamus augue lectus, venenatis a commodo eget, ullamcorper vel lorem. Vivamus posuere sagittis eros et consectetur. In feugiat gravida lectus sed pulvinar. Etiam dapibus luctus magna, fermentum dapibus mauris vulputate in. Aliquam at massa erat. In tincidunt dictum risus, vel eleifend sem tempor id. </p>
      </div>
    </div>
  </div>
</section>

使用文本和伪元素旋转 div？

rotating div with text & pseudo element?

html

css

positioning