如何使用自定义下划线创建页眉
灰熊
我正在尝试寻找创造性的方法来制作页眉，因为在我看来，典型的方法很无聊。
这是我发现的：
这两个分开的<hr />元素是<span class="glyphicon glyphicon-star></span>中间的吗？
我已经尝试过，但无法弄清楚如何做到这一点，以便它是动态的。如果 css<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。
有人可以帮我重新创建这个吗？
任何帮助表示赞赏。
布拉德
这个怎么样：
放置div带有底部边框的 a，并将包含星形的跨度设置为 position:relative 并将其向下移动到 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在CSS中使用带有下划线的自定义下划线？
- 2
使用大虾自定义下划线
- 3
如何为 html 或 css 中的文本创建自定义下划线或突出显示？
- 4
如何建议在Python中使用自定义双下划线变量？
- 5
如何使用下划线根据自定义排序顺序对对象数组进行排序
- 6
创建自定义Angular原理图以生成以下划线开头的文件？
- 7
如何使用 OpenSans 自定义字体在 **Swift 4** 中使文本范围带有下划线和粗体
- 8
UILabel：自定义下划线颜色？
- 9
下划线模板的自定义解析
- 10
自定义下划线以适合内容的宽度
- 11
下划线模板的自定义解析
- 12
在自定义字段中用下划线替换空格
- 13
自定义下划线以适合内容的宽度
- 14
Swift中的UITextField自定义下划线
- 15
文字下划线或边框底部自定义
- 16
制作带有下划线的自定义 UISearchBar
- 17
如何设计不带框并带有下划线的自定义EditText？
- 18
如何设计不带框并带有下划线的自定义EditText？
- 19
如何以txt或rtf格式显示自定义python QTextEdit效果（如下划线）？
- 20
如何自定义角度材料输入/选择下划线到框
- 21
Multiline UILabel：使用 boundingRect() 向标签的特定部分添加自定义下划线
- 22
如何使用ffmpeg创建带下划线的水印文本
- 23
自定义CSS表单：如何实现带有响应的带下划线的文本区域？
- 24
使用下划线定义种类/精度
- 25
使用下划线从对象创建数组
- 26
具有自定义主题的EditText在选择句柄下显示下划线
- 27
List <string> C＃自定义排序。在数字后加下划线
- 28
具有自定义主题的EditText在选择句柄下显示下划线
- 29
Xamarin.IOS 自定义条目下划线更长
我来说两句