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中并没 ...
随机推荐
- 200 Number of Islands 岛屿的个数
给定 '1'(陆地)和 '0'(水)的二维网格图,计算岛屿的数量.一个岛被水包围,并且通过水平或垂直连接相邻的陆地而形成.你可以假设网格的四个边均被水包围.示例 1:11110110101100000 ...
- linux下常用网络操作汇总 专题
centos 更改主机名,需要更改的几个地方: (1) /etc/sysconfig/network //更改主机名(2)/etc/hostname //更改主机名(3) /etc/hosts ...
- 自定义Image HtmlHelper
public static void Image(this HtmlHelper helper, string src, string alt = null, object htmlAttribute ...
- RabbitMQ六：通过routingkey模拟日志
序言 本章文章进入深入了解RabbiMQ,平时项目中我们经常用到记录日志,常见的不外乎:Info.debug.warn.Error. 情境进入:先简单说一下我们需求,我们开发过程中会遇到很多日 ...
- BOW-js浏览器对象模型
- CF915C Permute Digits
思路: 从左到右贪心放置数字,要注意判断这个数字能否放置在当前位. 实现: #include <bits/stdc++.h> using namespace std; typedef lo ...
- Toolbar自定义布局
Toolbar如何使用想必大家清楚地很,实际开发中标题栏的样式各色各样,因此其基本样式便不能满足我们的需求,这就需要我们自定义布局.打开ToolBar源码我们发现它继承ViewGroup,这就表示我们 ...
- opencv4android移植到系统app
最近在尝试使用opencv4android实现投影仪的自动对焦功能,在AndroidStudio后需要将功能移到系统工程编译成系统app,仅以此文记录下移植过程中遇到的问题. 首先去opencv官网下 ...
- log级别
trace<debug<info<warn<error<fatal trace: 是追踪,就是程序推进以下,你就可以写个trace输出,所以trace应该会特别多,不过没 ...
- 田字格布局html div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...