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 3294 Girls' research (manacher 最长回文串)
题目链接: Hdu 3294 Girls' research 题目描述: 给出一串字符串代表暗码,暗码字符是通过明码循环移位得到的,比如给定b,就有b == a,c == b,d == c,.... ...
- shell 2 解析
---- shell 3 /home/oracle/utility/macro/call_autopurge_arch.sh Description: Call purge archive log f ...
- SpringCloud开发学习总结（五）—— 服务容错保护Hystrix
在微服务架构中,我们将系统拆分成了很多服务单元,各单元的应用间通过服务注册与订阅的方式相互依赖.但由于每个单元都在不同的进程中运行,一来通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服务自身 ...
- sed附加命令
追加命令(命令a) sed '[address] a the-line-to-append' input-file 在第二行后面追加一行(原文这里可能有问题,没有写名行号) [root@sishen ...
- java 缓冲流 Buffer
缓冲流 Buffer :设置缓冲区加快执行效率 子类: (一)BufferedInputStream : 缓冲输入字节流 ,目的:提高读取文件的效率 注意: BufferedInputStream ...
- IIS ARR设置HTTP跳转到HTTPS
GUI Version - Select the website you wish to configure- In the “Features View” panel, double click U ...
- IE主页被恶意修改处理办法
HKEY_USERS/.DEFAULT/Software/Policies/Microsoft/Internet Explorer/Control Panel 下的DWORD值“homepage”的键 ...
- java实现的判断括号是否成对的代码，()[]{}都可以
本来想找找现成的,去,都写的好复杂.自己写一个吧.挺有成就感.哈哈 package com.test.jiexi; import java.util.Stack; public class Check ...
- 常用的HTTP方法有哪些？
GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器POST:用于传输数据给服务器,主要功能与GET方法类似,但一般推荐使用POST方式.PUT: 传输数据,报文 ...
- java_String类的功能
String类使用了final修饰不能被继承 实现类Serializable接口,字符串支持序列化 实现了Comparable接口,字符串可以比较大小 内部定义final char[] value用于 ...