Search code examples
csscss-transformspseudo-element

Vertical line below rotated text

I wanted to have a vertical line below a rotated text, but the behaviour I am attaining with my code is that the line starts at the center of the text.

.email {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 3rem;
  bottom: 10rem;
}

.email a {
  transform: rotate(90deg);
  font-weight: 300;
  font-size: 1rem;
}

.email::after {
  content: "";
  width: 1px;
  height: 5rem;
  background: red;
}
<div class="email">
  <a href="#">test@mail.com</a>
</div>

Following is an image of my actual output: enter image description here

How can I have the line below the rotated text?

Solution

  • You can add transform: rotate(90deg); also to the pseudo-element (and maybe also add some margin to create a bit of a distance to the text.

    .email {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 3rem;
  bottom: 10rem;
}

.email a {
  transform: rotate(90deg);
  font-weight: 300;
  font-size: 1rem;
}

.email::after {
  content: "";
  width: 1px;
  height: 5rem;
  background: red;
  transform: rotate(90deg);
  margin-top: 0.5rem;
}
    <div class="email">
  <a href="#">test@mail.com</a>
</div>

    (Note: Use full page mode to view the example, otherwise you won't see the text.)