Как сделать так, чтобы строка находилась в конце текста (CSS)?

Question

Это то, чего я хочу достичь

This is what I have done but this is not what I want

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

Вы можете сделать это, как показано ниже, без дополнительных элементов и псевдоэлементов:

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>

Answer 2

css

h3 {
  text-align: center;
}

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

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

Answer 3

Вы можете использовать элемент span для доступа к текстовым элементам внутри заголовка. Таким образом, вы можете добавить нижнюю границу к отдельным словам:

h3 {
  text-align: center;
}

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

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

Answer 4

Используя 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>