边框在居中标题下对齐左边

Question

我有一个标题标签，我想在标题下做一个小边框。 我用：在做完之后：

h1:after{
  content: '';
  display: block;
  height: 4px;
  width: 60px;
  margin: 9px 0 0 2px;
  color:#fff;
}

我想要标题左边的边框，当标题左对齐时它没问题，但是当我居中标题时，我不能准确地在左侧（响应），如果我使用保证金：0自动;边界位于标题的中心。

我有这个：

我想要这个：

有什么想法吗？ 谢谢！

Answer 1

如果您需要H1保持阻止，请将H1的文本放在这样的范围内，您可以将psuedo元素添加到范围中。

h1 {
  text-align: center;
}
h1 span {
  position: relative;
}
h1 span:after {
  background: red;
  content: '';
  display: block;
  height: 4px;
  position: absolute;
  left: 0;
  width: 60px;
}

<h1><span>Testing</span></h1>

Answer 2

如果你使你的h1内联块，你可以实现你的目标：

＆＃13;

＆＃13;

body {
  text-align:center;  /* this needs to be on the parent of the h1 */
}

h1 {
  /* make this inline-block so it is only as long as the text */
  display: inline-block;
}

h1:after {
  content: '';
  display: block;
  height: 4px;
  width: 60px;
  margin: 9px 0 0 2px;
  background: green;
}

＆＃13;

<h1>Nouveaut&eacute;s</h1>

＆＃13;

＆＃13;

＆＃13;