如何给边框底部标题字体真棒图标

Question

在我的第一个div容器中，我添加了一个标题1标签，给了一个边框底部一个我想要的颜色，并在中间添加了字体真棒图标。

正如你所看到的，我必须在字体上给出一个很棒的背景颜色，使其显得透明。 但现在我在第二个盒子上有一个背景图像，所以我很难实现同样的目标。

如何在我的其他div框中执行相同操作而不影响背景图像可见性以及标题1的边框底部？

 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

我建议你使用font-awesome icons沿与tag这里我用i tag ，它获得的容易align icon即在center是div标签，只需使用text-align:center 。 然后你可以在h1标签上使用伪选择器:before和:after并添加该border 。 在这个jsFiddle上to and fro 缩放并看到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的行。 使用字体awesome创建span标记，如下所示。

  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>