您当前的位置：主页 > 教程合集 > Html/css > 网站首页 Html/css

用CSS伪类before和after做左右横线中间文字效果

发布时间：2018-05-04 18:13:43编辑：余斗阅读：(0)字号：大中小

什么是:before和:after？该如何使用他们？

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

如下代码则代表分别在p标签前后加入字符“H”和字符“d”：

	
	  <style>

	        p:before{

	                content: "H" /*:before和:after必带技能，重要性为满5颗星*/

	        }

	        p:after{

	                content: "d" /*:before和:after必带技能，重要性为满5颗星*/

	        }

	    </style>

	    <p>ello Worl</p>

那么有的时候我们会在网页设计当中遇到大标题处加横线的效果，如下：

用CSS伪类before和after做左右横线中间文字效果

这个效果是可以用图片做出来的，但是图片比较占内存，我们最好是用css来实现，而此时CSS伪类before和after就发挥奇效了。

且看HTML代码：

	
	<div class="container">

	        <h3 class="title">Welcome to <span>Snapshot</span></h3>

	</div>

CSS代码：

	
	.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: 20%;/*调整背景横线的左右距离*/}

	h3.title span:after {right: 20%;}