我试图找到创造性的方法来做页面标题，因为在我看来，典型的无聊页面标题很枯燥。如何使用自定义下划线创建页眉
以下是我发现：
那两个分离<hr />元素，其之间的<span class="glyphicon glyphicon-star></span>？
我已经试过，但无法弄清楚如何做到这一点，以便它是动态的。如果<h1>长于关于（在图中），我不想调整CSS。
以下是我有：
HTML：
<div class="container">
<h1 class="text-center">About</h1>
<hr class="new-hr" />
<span class="glyphicon glyphicon-star"></span>
<hr class="new-hr"/>
</div>
CSS：
.new-hr{
width: 20%
}
我还创建了一个codepen。
有人可以帮我重建吗？
任何帮助表示赞赏。
如何：
将一个div与底部边框，并且设置包含恒星位置跨度：相对并将其向下移动了股利。
body {background: #fff;}
.underline {
width: 100%;
border-bottom: 4px solid #000;
text-align: center;
position: relative;
}
.underline span {
position: relative;
top: 15px;
padding: 0 10px;
background: #fff;
font-size:25px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="underline">
<span>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
</div>可以先创建spanh1元素，将其内部都有明星。并添加行，你可以使用position: absolute定位伪元素上span
h1 {
font-size: 20px;
display: inline-flex;
flex-direction: column;
margin: 10px 35px;
}
h1 > span {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
span:after, span:before {
content: '';
background: black;
height: 1px;
flex: 0 0 60%;
margin: 0 10px;
}<h1>ABOUT<span>★</span></h1><br>
<h1>LOREM IPSUM<span>★</span></h1>你也可以做到这一点使用:after和:before伪元素不Flexbox。
h1 {
font-size: 20px;
text-align: center;
margin: 10px 35px;
display: inline-block;
}
h1 > span {
font-size: 20px;
position: relative;
display: block;
}
span:after, span:before {
content: '';
background: black;
height: 1px;
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
span:before {
left: -15px;
}
span:after {
right: -15px;
}<h1>ABOUT<span>★</span></h1><br>
<h1>LOREM IPSUM<span>★</span></h1>你可以给领导一个边界，然后添加明星作为pseudoelement，它在边界的中心位置...
body {
background-color: lightgreen !important;
}
.border {
display: table;
margin: 10px auto;
border-bottom: 5px solid #FFF;
position: relative;
padding: 15px 20px;
color: #FFF;
text-transform: uppercase;
}
.border::after {
position: absolute;
font-family: "Glyphicons Halflings";
content: "\e006";
width: 28px;
left: 0;
right: 0;
bottom: -18px;
margin: auto;
font-size: 20px;
color: #FFF;
background: lightgreen;
padding: 5px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="text-center border">About</h1>
</div>我为KTSW广播电台做了一些类似的事情（demo）使用hr,hr::after和背景图像。
Here is a Fiddle以及下面的嵌入式示例。
body {
background: white;
}
hr {
background: #ebebeb;
margin: 5rem 0;
position: initial;
margin: 2rem 0;
height: 1px;
border: 0px solid #fff;
}
hr:after {
background: url(http://txstate.edu/prospectiveflash/ktsw/boombox-hr.jpg) no-repeat top center;
content: "";
display: block;
height: 40px;
position: relative;
top: -20px;
background-size: 80px;
}<div class="separator">
<hr>
</div>林不知道这是否是最好的方法，但这应该工作。
<div class="container">
<div class ="text-center">
<h1 class="text">About</h1>
<div class="icon">
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
.text-center{
background: #6DD286;
padding: 1px 10px 10px;
color: #fff;
position: relative;
}
.text {
border-bottom: 3px solid #fff;
padding-bottom: 10px;
}
.icon {
background: #6DD286;
position: absolute;
bottom: 10px;
margin-left: 50%;
transform: translateX(-100%);
padding: 0 5px;
}
你从哪里找到那个明星？ –
这是HTML特殊字符，你可以在google上找到很多列表。 –
明白了谢谢 –