css实现中间文字两端横线的两种方法

最新推荐文章于 2025-06-23 15:50:41 发布

原创最新推荐文章于 2025-06-23 15:50:41 发布 · 7.6k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#css #中间文字两端横线 #前端

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种使用CSS创建水平线的方法，一种是利用fieldset和legend元素，另一种是通过:before和:after伪元素结合div实现。这两种方法可以为网页设计提供简洁的视觉效果。

效果图

中间文字两端横线

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>line</title>
<style>
/*第一种方法*/
fieldset{border: none;padding: 0;border-top: 1px blue solid;text-align: center;width: 300px;margin: auto;}
legend{padding: 0 10px;font-size: 16px;color: blue;}
/*第二种方法*/
.title{color: red;text-align: center;font-size: 16px;}
.title:before,.title:after{content: "";width: 100px;border-top: 1px red solid; display: inline-block;
vertical-align: middle;}
.title:before{margin-right: 10px;}
.title:after{margin-left: 10px;}
</style>
</head>
<body bgcolor="#F2F2F2">
<!--第一种方法-->	
<fieldset><legend><span>第一种方法</span></legend></fieldset>
<!--第二种方法-->	
<div class="title">第二种方法</div>
</body>
</html>