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:
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.)