Vertical line below rotated text-CodePudding

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 >
  <a href="#">[email protected]</a>
</div>

Following is an image of my actual output:

How can I have the line below the rotated text?

CodePudding user response：

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 >
  <a href="#">[email protected]</a>
</div>

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

CodePudding user response：

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 >
 <a href="#">[email protected]</a>
</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 >
 <a href="#"><u>[email protected]</u></a>
</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 >
 <a href="#"><u>[email protected]</u></a>
</div>

CodePudding user response：

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 >
  <a href="#">[email protected]</a>
</div>

CodePudding user response：

writing-mode: vertical-rl; you can achieve this. for more information visit this.

.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(30%   5px);
  width: 2px;
  bottom: 0;
  right: 50%;
  transform: translateX(-50%);
  background-color: red;
}

<div >
  <a href="#">[email protected]</a>
</div>

CodePudding user response：

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 >
  <a href="#">[email protected]</a>
</div>