rotating div with text & pseudo element?

Question

I've been working on how to rotate a div with number text and an ::after pseudo element styled into a line. Essentially I've gotten as far as arranging it horizontally (responding to screen width), but I want the text to rotate -90deg, stick to the left side of its container, and for the line to take up the remaining height of the container (but not go outside of the container).

Should look like this:

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>

I've tried adding a transform property with rotate and translate, messing with writing-mode properties, but can't seem to get the pseudo element to lengthen dynamically with the changing height (since the container's height changes with screen size). Any tips?

Does this answer your question? [How do I rotate text in css?](https://stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css) — s.kuznetsov, Mar 12 '21 at 20:37
@s.kuznetsov it came close, but the solution doesn't help with the problem added by the added pseudo element and it not responding to section height changes. They don't want to rotate the entire title div, and I do--both text and pseudo element. I can rotate the text fine, but the ::after pseudo element doesn't respond to the section height now that it's rotated and overflows it container. Does that make sense? — Marci Val, Mar 12 '21 at 23:07
@MarciVal you can use `transform: rotate(-90deg);` in your container — GucciBananaKing99, Mar 13 '21 at 08:47

score 0 · Accepted Answer · answered Mar 22 '21 at 20:14

Figured it out, here's the solution (styled with flexbox) for anyone with this weirdly specific problem.

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>

rotating div with text & pseudo element?

1 Answers1