我正在嘗試使用css :after pseudo class在HTML中的header標(biāo)簽后添加一條黑線。代碼如下:

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1:after {
  display: inline-block;
  content: "";
  height: 2px;
  background: black;
  width: 200px;
  margin-left: 5px;
  margin-top: 8px;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>

使用位置:絕對(duì)；和寬度:100%會(huì)給你想要的輸出。

檢查以下內(nèi)容。

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1::after {
    background: none repeat scroll 0 0 black;
    content: "";
    display: inline-block;
    height: 2px;
    margin-left: 5px;
    margin-top: 8px;
    position: absolute;
    top: 0.5em;
    width: 100%;
}
h1 {
    overflow: hidden;
    position: relative;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>

我試圖用表格顯示屬性來(lái)解決這個(gè)問(wèn)題

h1 {
 display: table;
 white-space: nowrap;
}

h1:after {
 display:table-cell;
 content: "";
 width: 100%;
 border-bottom: 2px solid black;
}

沒(méi)關(guān)系，我已經(jīng)(再次)回答了我的問(wèn)題

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  display: -webkit-flex;
  display: flex;
  width: 100%;
}

h1:after {
  -webkit-flex: 3;
  -flex: 3;
  display: inline-block;
  content: "";
  height: 2px;
  background: black;
  margin: auto 0 auto 5px;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>