css伪类实现文字两侧划线效果
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伪类实现文字两侧划线效果的更多相关文章
- CSS伪类before，after制作左右横线中间文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- 12、第十二节课，css伪类 （转）
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- CSS伪类整理笔记
0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...
随机推荐
- Qt事件系统之一：Qt中的事件处理与传递
一.简介 在Qt中,事件作为一个对象,继承自 QEvent 类,常见的有键盘事件 QKeyEvent.鼠标事件 QMouseEvent 和定时器事件 QTimerEvent 等,与 QEvent 类的 ...
- QT5之2D绘图-绘制路径
在绘制一个复杂的图形的时候,如果你需要重复绘制一个这样的图形,就可以使用到QPainterPath类,然后使用QPainter::drawPath()来进行绘制. QPainterPath类为绘制操作 ...
- 题解报告：poj 2533 Longest Ordered Subsequence（最长上升子序列LIS）
Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...
- 解题报告：hdu 2073 无限的路
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2073 Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接 ...
- CentOS安装GlassFish4.0 配置JDBC连接MySQL
转自:http://linux.it.net.cn/CentOS/course/2014/0724/3319.html 版本glassfish-4.0.zip 1.解压,拷贝到指定安装路径 unz ...
- 转如何升级oracle版本？（11.2.0.1至11.2.0.4）
dbua from 11.2,0.2 to 11.2.0.4 need 2hours 升级结果: 步骤名 日志文件名 状态 升级前操作 PreUpgrade.l ...
- $.extend(x,y); 函数用法介绍。
第一篇资料: 转自: https://www.cnblogs.com/yuqingfamily/p/5813650.html 语法:jQuery.extend( [deep ], target, o ...
- jq星星评分
html代码 <div class="make_mark"> <h5>请为这次服务打分</h5> <div class="mar ...
- mysql 的 case when then 用法 和null 的判断
表:一个表 aa 有两个字段 id 和 sex ,第1条记录的sex 为空串 ('') 第二条记录的sex 为空 (null) 1. 用法: 第一种: select (case 字段名 whe ...
- Python学习 Day 4 函数 切片 迭代 列表生成式 生成器
定义函数 def my_abs(x):#求绝对值的my_abs函数 if x >= 0: return x else: return –x def nop():#空函数 pass#占位符 参数检 ...