这篇文章将为大家详细讲解有关CSS怎么实现文字居中两边横线效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果：<!doctype html><html lang=
这篇文章将为大家详细讲解有关CSS怎么实现文字居中两边横线效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
效果：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-Scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta Http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .title{ text-align: center; position: relative; height: 50px; line-height: 50px; width: 800px; margin: 200px auto; } .title:after,.title:before{ content: ""; position: absolute; top: 50%; background: #7a7a7a; height: 1px; width: 35%; } .title:after{ left: 0; } .title:before{ right: 0; } </style></head><body> <div class="title">css实现文字居中两边横线效果</div></body></html>关于“css怎么实现文字居中两边横线效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: css怎么实现文字居中两边横线效果
本文链接: https://www.lsjlt.com/news/252630.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0