編碼的世界 / 優質文選 / 生涯

CSS偽類before，after制作左右橫線中間文字效果

2022年7月02日
-    


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .container{





 width: 1000px;
 margin: 10px auto;
 border: 1px solid red;
 }
 h3.title {
 color: #F2AE11;
 font-size: 1.3em;
 margin-bottom: 3em;
 text-align: center;
 font-weight: 500;
 line-height: 1.1;
 }
 h3.title span {
 display: block; /*設置為塊級元素會獨占一行形成上下居中的效果*/
 font-size: 3em;
 color: #212121;
 position: relative; /*定位橫線（當橫線的父元素）*/
 }
 h3.title span:before, h3.title span:after {
 content: ''; /*CSS偽類用法*/
 position: absolute; /*定位背景橫線的位置*/
 top: 52%;
 background: #494949; /*寬和高做出來的背景橫線*/
 width: 9%;
 height: 2px;
 }
 h3.title span:before{
 left: 25%; /*調整背景橫線的左右距離*/
 }





 h3.title span:after {
 right: 25%;
 }
 </style>
</head>
<body>
<div class="container">
 <h3 class="title">Welcome to <span>Snapshot</span></h3>
 <div class="row">
 <img src="images/hz01.jpg" width="300" height="200">
 </div>
</div>
</body>
</html>

總結：
1，這種方法比利用邊框和背景圖做出的效果更好更利於控制和修改
2，缺點是偽類在IE8上兼容有些問題

熱門文章