让我的 h2 边框底部只是强调文本而不是 div

Question

我想让 h2:after 的边框底部填充文本而不是 div。这是我的代码：

.text_box{
   margin: 0 auto;
   width: 355px;
   background:red;
}

h2{
   margin: 0 auto;
   font-weight: 100;
   font-size: 1em;
   text-align: center;
   padding:20px;
}

h2:after{
   content:'';
   background:black;
    width:100%;
    height:2px;
    display:block;
}

<html>
  <head>
  <title></title>
  </head>
<body>
<div class="text_box">
    <h2>NEWS & ACCOLADES</h2>
</div>
</body>
</html>

JSFiddle：http://codepen.io/rezasan/pen/YNZQEQ

Answer 1

Here is the solution of your question.

.text_box {
    margin: 0 auto;
    width: 355px;
    background: red;
    text-align: center;
}
h2 {
    margin: auto;
    font-weight: 100;
    font-size: 1em;
    text-align: center;
    padding: 20px;
    position: relative;
    display: inline-block;
}
h2:after {
    content: '';
    background: black;
    width: 100%;
    height: 2px;
    display: block;
 
}

<div class="text_box">
        <h2>NEWS & ACCOLADES</h2>
</div>

Answer 2

.text_box {
margin: 0 auto;
width: 355px;
background: red;
text-align: center;
}


h2 {
margin: auto;
font-weight: 100;
font-size: 1em;
text-align: center;
padding: 20px;
position: relative;
display: inline-block;

}

h2:after {
content: '';
background: black;
width: 100%;
height: 2px;
display: block;

}

Answer 3

使用position风格属性你可以这样做

    .text_box{
  margin: 0 auto;
  width: 355px;
  background:red;
}

h2{
 margin: auto;
 font-weight: 100;
 font-size: 1em;
 text-align: center;
 padding:20px;
}

.underline:after{
    background: black none repeat scroll 0 0;
    content: "";
    display: block;
    height: 2px;
    margin-left: 65px;
    position: absolute;
    width: 182px;
}

 <div class="text_box">
      <h2 class="underline">NEWS & ACCOLADES</h2>
</div>

让我的 h2 边框底部只是强调文本而不是 div

Make my h2 border bottom just underline the text not the div

html

css

pseudo-element