カスタマイズされた下線を使ってページヘッダを作成する方法

Question

私は、典型的なものが退屈なので、ページヘッダを行うための創造的な方法を見つけようとしています。ここで

は、私が見つけたものです：

は、これら二つの間で<span class="glyphicon glyphicon-star></span>で<hr />要素を分離していますか？

私は試しましたが、それを行う方法を理解できないので、動的です。 <h1>がAbout（ピクチャ内）よりも長い場合は、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作成しました。

誰かがこれを再作成する手助けができますか？

何か助けていただければ幸いです。

Answer 1

これはどう：

下の境界とdivを入れて、セットポジションにスターを含むスパン：相対と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>

Answer 2

あなたはまず、その内部の星を持つことになりますspanとh1要素を作成することができます。そして、行を追加し、あなたはまた、擬似要素を配置するposition: absoluteを使用してFlexboxせずにこれを行うことができます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擬似要素を使用することができます。

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>

Answer 3

あなたは...その後、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>

を与えることができます

Answer 4

私はKTSWラジオ局（,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>

Answer 5

イムこれが最良の方法ですが、これが動作するかどうかわかりません。

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