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

【问题标题】：rotating div with text & pseudo element?使用文本和伪元素旋转 div？
【发布时间】：2021-03-12 20:18:36
【问题描述】：

我一直在研究如何使用数字文本和 ::after 伪元素旋转 div，并将其设置为一行。基本上我已经达到水平排列它（响应屏幕宽度），但我希望文本旋转-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>

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

【问题讨论】：

这能回答你的问题吗？ How do I rotate text in css?
@s.kuznetsov 它接近了，但该解决方案无助于解决添加的伪元素添加的问题，并且它不响应截面高度的变化。他们不想旋转整个标题 div，而我愿意——包括文本和伪元素。我可以很好地旋转文本，但是 ::after 伪元素不会响应部分高度，因为它已旋转并溢出它的容器。这有意义吗？
@MarciVal 你可以在你的容器中使用transform: rotate(-90deg);

标签： html css positioning

【解决方案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>

【讨论】：