旋转文本下方的垂直线

Question

我想在旋转的文本下方有一条垂直线，但我用我的代码获得的行为是该行从文本的中心开始。

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

以下是我的实际 output 的图像：

我怎样才能在旋转的文本下方有一行？

Answer 1

您可以添加transform: rotate(90deg); 也适用于伪元素（并且可能还添加一些margin以创建与文本的距离。

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

（注意：使用full page模式查看示例，否则看不到文字。）

Answer 2

writing-mode: vertical-rl; 你可以做到这一点。 欲了解更多信息，请访问 此。

 .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 class="email"> <a href="#">test@mail.com</a> </div>

Answer 3

边框作为伪元素。 （您在有问题的帖子中尝试过的那个）

（我建议在此代码段下使用text-decoration或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; }.email::after { content: ""; width: 1px; height: 6.2rem; background: red; transform: translateY(-60%); margin-right: 15px; }

 <div class="email"> <a href="#">test@mail.com</a> </div>

带有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"> <a href="#"><u>test@mail.com</u></a> </div>

使用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"> <a href="#"><u>test@mail.com</u></a> </div>

Answer 4

我想在旋转的文本下方有一条垂直线

我已经为你改变了一些东西：

• 我已将::after伪元素应用于<a>元素
• 我已经交换了::after伪元素的尺寸，使其代表水平（而不是垂直）线
• 我已经应用transform: rotate(90deg); 到.email （而不是.email a ）

---

工作示例

 .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"> <a href="#">test@mail.com</a> </div>

Answer 5

您可以使用box-shadow而不是伪

（插图可以更好地与变换一起使用）

 .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"> <a href="#">test@mail.com</a> </div>