フォントのすばらしいアイコンで境界のボトムを見出しに与える方法

Question

私の最初のdivコンテナで、見出し1タグを追加し、境界線の下に自分の欲望の色を付け、途中にフォントの素晴らしいアイコンを追加しました。

ご覧のとおり、フォントの背景色を透明にするにはすばらしかったです。しかし、今では2番目のボックスに背景画像があるので、同じことを達成するのに苦労しています。

バックグラウンド画像に影響を与えずに他のdivボックスで同じ操作を行うにはどうすればいいですか？ 見出しと見出し1の枠線の下端は同じですか？ラインのdivのための

div.container{ 
 
    background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg); 
 
    
 
    background-size: cover; 
 
    background-position: 50%; 
 
} 
 
div{ 
 
    height: 100px; 
 
} 
 
h1.widget_title_1{ 
 
    font-size: 25pt; 
 
    display: inline-block; 
 
    margin: 0; 
 
    margin-top: 35px; 
 
    padding-bottom: 9px; 
 
    border-bottom: 1px solid #898989; 
 
    position: relative; 
 
} 
 
h1.widget_title_1:after { 
 
    position: absolute; 
 
    font-family: fontawesome; 
 
    display: block; 
 
    margin-left: 58px; 
 
    margin-top: -7px; 
 
    padding: 0 5px; 
 
    font-size: 24pt; 
 
    color: black; 
 
    content: '\f107'; 
 
    font-weight: 300; 
 
    background-color: white; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<div class="container-1"> 
 
    <h1 class="widget_title_1"> 
 
    heading 1 
 
    </h1> 
 
</div> 
 
<div class="container"> 
 
    <h1 class="widget_title"> 
 
    heading 1 
 
    </h1> 
 
</div>

Answer 1

私はあなたのように、ここで私はi tagを使用しているfont-awesome icons沿っ-とtagを使用することをお勧め、それだけでtext-align:centerを使用することによって、そのdivタグのcenterでの簡単align iconに、すなわちを取得します。次に、擬似セレクタ:beforeと:afterをh1タグに使用し、それにborderを追加できます。スケールto and froをjsFiddleに、borderを表示すると、特定の画面解像度でattachedが得られません。

.container-1 { 
 
    height: 100px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 

 
.container-1 > .widget_title_1 { 
 
    font-size: 25pt; 
 
    margin: 0; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.container-1 > .fa { 
 
    font-size: 24px; 
 
    display: block; 
 
    height: 30px; 
 
    text-align: center; 
 
} 
 

 
.container-1 > .widget_title_1:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #111; 
 
    bottom: -38%; 
 
    left: 0; 
 
    margin-left: -10px; 
 
} 
 

 
.container-1 > .widget_title_1:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #111; 
 
    bottom: -38%; 
 
    margin-right: -10px; 
 
    right: 0; 
 
} 
 

 
.container { 
 
    background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg); 
 
    background-size: cover; 
 
    background-position: 50%; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.container > .widget_title { 
 
    font-size: 25pt; 
 
    margin: 0; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.container > .fa { 
 
    font-size: 24px; 
 
    display: block; 
 
    height: 30px; 
 
    width: 138px; 
 
    text-align: center; 
 
} 
 

 
.container > .widget_title:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #111; 
 
    bottom: -38%; 
 
    left: 0; 
 
    margin-left: -10px; 
 
} 
 

 
.container > .widget_title:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #111; 
 
    bottom: -38%; 
 
    margin-right: -10px; 
 
    right: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<div class="container-1"> 
 
    <h1 class="widget_title_1"> 
 
    heading 1 
 
    </h1> 
 
    <i class="fa fa-angle-down"></i> 
 
</div> 
 
<div class="container"> 
 
    <h1 class="widget_title"> 
 
    heading 1 
 
    </h1> 
 
    <i class="fa fa-angle-down"></i> 
 
</div>

Answer 2

使用:before:after。 以下のように、素晴らしいフォントでスパンタグを作成します。

div.container{ 
 
     background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg); 
 
     
 
     background-size: cover; 
 
     background-position: 50%; 
 
    } 
 
    div{ 
 
     position: relative; 
 
     height: 100px; 
 
    } 
 
    h1.widget_title_1{ 
 
     font-size: 25pt; 
 
     display: inline-block; 
 
     margin: 0; 
 
     margin-top: 35px; 
 
     padding-bottom: 9px; 
 
     border-bottom: 1px solid #898989; 
 
     position: relative; 
 
    } 
 
    span:after { 
 
     position: absolute; 
 
     font-family: fontawesome; 
 
     display: block; 
 
     margin-left: 58px; 
 
     margin-top: -7px; 
 
     top:40px; 
 
     padding: 0 5px; 
 
     font-size: 24pt; 
 
     color: black; 
 
     content: '\f107'; 
 
     font-weight: 300; 
 
     background-color: transparent; 
 
    } 
 
    div.container:after{ 
 
     content: ""; 
 
     position: absolute; 
 
     height: 5px; 
 
     border-bottom: 1px solid black; 
 
     top: 45px; 
 
     width: 60px; 
 
    } 
 
    div.container:before{ 
 
     content: ""; 
 
     position: absolute; 
 
     height: 5px; 
 
     border-bottom: 1px solid black; 
 
     top: 45px; 
 
     left:90px; 
 
     width: 60px; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
    <div class="container-1"> 
 
     <h1 class="widget_title_1"> 
 
     heading 1 
 
     </h1> 
 

 
    </div> 
 
    <div class="container"> 
 
     <h1 class="widget_title"> 
 
     heading 1 
 
     </h1> 
 
     <span></span> 
 
    </div>