Vertical line below rotated text - css

Question

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">
test#mail.com
</div>
Following is an image of my actual output:
How can I have the line below the rotated text?

Answer 1

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">
test#mail.com
</div>
(Note: Use full page mode to view the example, otherwise you won't see the text.)

Answer 2

writing-mode: vertical-rl; you can achieve this. for more information visit this.
:root {
--height-for-line: 60px;
}
.email {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.email a {
color: white;
text-transform: none;
writing-mode: vertical-rl;
background-color: blue;
padding: 12px;
position: relative;
}
.email a::after {
content: "";
position: absolute;
height: calc(var(--height-for-line) - 15px);
width: 2px;
bottom: 5px;
right: 50%;
transform: translateX(-50%);
background-color: red;
}
<div class="email">
test#mail.com
</div>

Answer 3

Border as pseudo element. (the one you tried in question post)
(I would suggest using the text-decoration or border-bottom solution under this code snippet.)
.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: 6.2rem;
background: red;
transform: translateY(-60%);
margin-right: 15px;
}
<div class="email">
test#mail.com
</div>
Solution with text-decoration: underline;
.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;
text-decoration: underline;
-webkit-text-decoration-color: red; /* Safari */
text-decoration-color: red;
}
<div class="email">
<u>test#mail.com</u>
</div>
Solution using border-bottom
.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;
border-bottom: 1px solid red;
}
<div class="email">
<u>test#mail.com</u>
</div>

Answer 4

I wanted to have a vertical line below a rotated text
I've shifted things around for you a little:
I've applied the ::after pseudo-element to the <a> element
I've swapped dimensions of the ::after pseudo-element so that it represents a horizontal (rather than a vertical) line
I've applied transform: rotate(90deg); to .email (rather than .email a)
Working Example
.email {
position: fixed;
top: 0;
left: 3em;
transform: rotate(90deg);
transform-origin: 0 0;
}
.email a {
font-weight: 300;
font-size: 1rem;
}
.email a::after {
content: '';
display: inline-block;
width: 5rem;
height: 1px;
background: red;
}
<div class="email">
test#mail.com
</div>

Answer 5

Instead of a pseudo, you could use box-shadow
(inset to work better with transform)
.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;
box-shadow: inset 0 -1px 0 0 red;
padding-bottom: 1rem;
}
<div class="email">
test#mail.com
</div>