css伪类实现文字两侧划线效果，效果如下：

代码如下：

<!DOCTYPE HTML>

<html>

	<head>

		<title>

			css伪类的学习

		</title>

		<meta charset="gb2312">

		<style>

				  .div06{

				  	width:900px;

				  	height:30px;

				  	margin:0 auto;

				  	background:#f00;

				  	text-align:center;

				  	color:#fff;

				  	font-size:20px;

				  	}

				  .div06:before,.div06:after

				  {

 					content:"";

 					width:250px;

 					height:2px;

 					background:#fff;

 					display:block;				/*1.首先使伪类显示方式为块级元素*/

 					position:relative ;		/*2.通过相对定位的方式控制两侧内容的位置*/

				  }

				  .div06:before{				/*3.控制左侧横线的位置*/

				  	top:15px;

 					  left:50px;

				  	}

				  .div06:after					/*4.控制右侧横线的位置*/

				  {

	 					top:-15px;

	 					right:-600px;

				  }

		</style>

	</head>

	<body>

		<!--css的伪类实现文字两侧横线效果-->

		<div class="div06">

			css的伪类实现文字两侧横线效果

		</div>

		soulsjie--2017-10-17

	</body>

</html>

css伪类实现文字两侧划线效果的更多相关文章

  1. CSS伪类before，after制作左右横线中间文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  3. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  4. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  5. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  6. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  7. 12、第十二节课，css伪类 （转）

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  8. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

随机推荐

  1. Miller&&Pollard HDOJ 4344 Mark the Rope

    题目传送门 题意:一个长为n(n<2^63)的管子,在管子上做标记,每隔L个长度单位做一个标记,从管子头端开始,保证最后一次标记恰好在管子的尾端.让你找出有多少个这样的L(L<n),且他们 ...

  2. Saas物联网共享平台实战

    什么是SaaS系统: 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infrastructure-as-a-service PaaS:平台服务,Pla ...

  3. 微信打开网址添加在浏览器中打开提示 http://caibaojian.com/weixin-tip.html

    原文链接:http://caibaojian.com/weixin-tip.html#t2 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基 ...

  4. leetcode764 Largest Plus Sign

    思路: 首先使用dp计算出在每个位置(i, j)上下左右最多有多少个连续的1,得到up[i][j], down[i][j], left[i][j], right[i][j].然后计算这四个值中的最小值 ...

  5. hihocoder offer收割编程练习赛10 C 区间价值

    思路: 令v[l, r](0<= l <= r < n)表示区间[l,r]的价值,则长度为n的区间的价值最少为0,最多为n*(n-1)/2.整体对价值二分,求能满足sum{v[l, ...

  6. .NET 出现参数化查询 需要参数但未提供该参数的错误

    1.问题的来源 在.NET或者C#中,我们一般执行sql语句的话,推荐使用参数化查询,这样可以避免sql注入的攻击,但是,我在使用参数化查询的时候 出现了以下的错误,详细如下图: 图一这是写sql语句 ...

  7. 手动配置wamp环境(1)--apache安装与基本操作

    Apache服务器简介: Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 安装apac ...

  8. BASH BUILTIN COMMANDS 内建命令

    除非另外说明,这一章介绍的内建命令如果接受 - 引导的选项,那么它也接受 -- 作为参数,来指示选项的结束 : [arguments] 没有效果:这个命令除了扩展 arguments 并且作任何指定的 ...

  9. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  10. LINUX：解压问题tar: Child returned status

    解压某个文件时 #tar -zxvf xxxxx.tar.gz 出现下面的错误提示: gzip: stdin: not in gzip formattar: Child returned status ...