Question

我正在尝试使用css：after伪类在HTML中的标头标记之后添加黑线。这是代码：

.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>

Codepen：http://codepen.io/angelangelesiii/pen/YXwPJb

我希望那条长黑线跨越标题本身留下的整个宽度。

注意：我不想尝试将该行划分为100％，然后将标题放在前面，并带有白色背景。这是一种幻觉，但不是我想要找到的答案。并且尽可能没有JS解决方案，我保持这样简单。

Answer 1

没关系我已经回答了我的问题（再一次）

.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;
}

我用过flexbox来解决这个问题。我知道flexbox有一些问题，但这对我有用，所以它很好。

Answer 2

使用position: absolute;和width:100%会为您提供所需的输出。

检查以下内容。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助。

Answer 3

我尝试使用表格显示属性来解决它

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

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

在标头标记

3 个答案: