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中并没 ...
随机推荐
- Hdu 5407 CRB and Candies (找规律)
题目链接: Hdu 5407 CRB and Candies 题目描述: 给出一个数n,求lcm(C(n,0),C[n,1],C[n-2]......C[n][n-2],C[n][n-1],C[n][ ...
- 暴力 ZOJ 1403 Safecracker
题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...
- 字符串处理 Codeforces Round #285 (Div. 2) B. Misha and Changing Handles
题目传送门 /* 题意:给出一系列名字变化,问最后初始的名字变成了什么 字符串处理:每一次输入到之前的找相印的名字,若没有,则是初始的,pos[m] 数组记录初始位置 在每一次更新时都把初始pos加上 ...
- [POJ1509]Glass Beads 后缀自动机 最小循环串
题目链接:http://poj.org/problem?id=1509 题目意思就是求循环字符串的最小表示. 我们用字符串S+S建立SAM,然后从root开始走n步,每次尽量选最小的. 由于 SAM ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- Hadoop YARN学习之监控集群监控Nagios（4）
doop YARN学习之监控集群监控Nagios(4) 1. Nagios是一个流行的开源监控工具,可以用来监控Hadoop集群. 2. 监控基本的Hadoop服务 调试好脚本后命名为chek_res ...
- 30款jQuery常用网页焦点图banner图片切换
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- photoshop cs6安装和破解步骤
http://tieba.baidu.com/p/4791130877 http://www.frontopen.com/1181.html
- 迅为7寸Android嵌入式安卓触摸屏，工业一体机方案
嵌入式安卓触摸屏板卡介绍-工业级核心板: 嵌入式安卓触摸屏功能接口介绍: 品质保障: 核心板连接器:进口连接器,牢固耐用,国产连接器无法比拟(为保证用户自行设计的产品品质,购买核心板用户可免费赠送底板 ...
- Java锁，真的有这么复杂吗？
为什么使用synchronizedvolatile,在多线程下可以保证变量的可见性,但是不能保证原子性,下面一段代码说明: 运行上面代码,会发现输出flag的值不是理想中10000,虽然volatil ...