标题对齐问题下面的行

Question

我已经创建了一个标题样式，标题下面有一行。问题是该行与文本中心或右边的对齐方式不对齐。无论文本在哪里对齐，它始终位于左侧。

h1 {
margin: 0 0 25px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color:black;
    line-height:2em;


}
h1:after {
content:' ';
position: relative;
display:block;
width: 40px;
margin: 0 0;
border:1px solid #CB9033;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);

}

Answer 1

您可以使用class进行中心和右对齐：

h1 {
  color:#000;
  font-family:'Raleway', sans-serif;
  font-weight:300;
  line-height:2em;
  margin:0 0 25px;
  position:relative;
}

h1:after {
  border:1px solid #CB9033;
  content:'';
  display:block;
  margin:0;
  position:absolute;
  width:40px;
}

h1.right {
  text-align:right;
}
h1.right:after {
  right:0;
}
h1.center {
  text-align:center;
}
h1.center:after {
  left:50%;
  transform:translateX(-50%);
}

<h1 class="right">Test</h1>
<h1 class="center">Test</h1>
<h1>Test</h1>