CSS 伪元素before,after制作文字两边的横线

css3为了区分伪类和伪元素，伪元素采用双冒号写法

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

//html 部分
<div class="title">
<h3>温馨提示</h3>
</div>
//css 部分
.title h3 { display: flex; justify-content: center; align-items: center; } 
.title h3:after { background: #555; content: ""; height: 2px; width: 80px; margin-left: 15px; }
.title h3:before { background: #555; content: ""; height: 2px; width: 80px; margin-right: 15px; }