html字两边的横线_css如何在文字两边加上横线的效果？

CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。那么css如何在文字两边加上横线(文字显示在水平线中间)？下面本篇文章给大家介绍一下。

css在文字两边加上横线(文字显示在水平线中间)

语法：h4:before, h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

示例：

h4 {

display: flex;

flex-direction: row;

}

h4:before,

h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

img {

height: 100px;

width: 100px;

border-radius: 50%;

}

HTML中文网

效果图：

更多web前端开发知识，请查阅 HTML中文网 ！！