如何使该行位于文本末尾 (CSS)？

Question

这就是我想要实现的

这是我所做的，但这不是我想要的

h3 {
  text-align: center;
}

h3::after {
   content: '';
   display: block;
   border-top: 3px solid #000;
   width: 30px;
   margin: 0 auto;
}

 <h3>Get In Touch</h3>

Answer 1

使用 display:inline-block 和 position:absolute 作为你的 after 伪元素你可以做到。

h3 {
  text-align: center;
  position:relative;
  display:inline-block;
}

h3::after {
   content: '';
   display: block;
   border-top: 3px solid #000;
   width: 30px;
   margin: 0 auto;
   position:absolute;
   left:0;
   bottom:0;
}

<h3>Get In Touch</h3>

Answer 2

css

h3 {
  text-align: center;
}

h3 span {
  border-bottom: 1px solid #000;
}

<h3><span>Get</span> In Touch</h3>

Answer 3

您可以使用 span-element 访问标题内的文本元素。这样您就可以为单个单词添加底部边框：

h3 {
  text-align: center;
}

span {
  border-bottom: 3px solid black;
}

 <h3><span>Get</span> In Touch</h3>

Answer 4

不需要额外的元素和伪元素，你可以像下面那样做：

h3 {
  display:table;
  margin: 0 auto;
  padding-bottom:3px;
  background:
    linear-gradient(#000 0 0) /* color */
    bottom left/ /* position */
    30px 3px  /* width  height */
    no-repeat;
}

<h3>Get In Touch</h3>

如何使该行位于文本末尾 (CSS)？

How can I make the line be at the end of the text (CSS)?

html

css

responsive-design