文档章节

用css伪类:before,:after前后插入线

闫亚亚
 闫亚亚
发布于 2016/11/30 16:07
字数 159
阅读 131
收藏 0

经常遇到这种情况:

<span class="or">Snapshot</span>

css中:

首先

.or{display: block;position: relative;text-align: center;font-size: 20px;}// 

/*设置为块级元素会独占一行形成上下居中的效果*/

加相对定位是为了:/*定位横线(当横线的父元素)*/

.or:before,.or:after{
content: "";/*CSS伪类用法*/
position: absolute;/*定位背景横线的位置*/
width:45%;/*宽和高做出来的背景横线*/
height:2px;
background:#CCCCCC;
top:15px;}
 

 

另外一种简单的办法:

<div class="line-left-right">分割线</div>

给这个.line-left-right设置:

.line-left-right{
padding:0 20px 0px;
margin:20px 0px;
line-height:1px;
border-left:100px solid red;
border-right:100px solid red;
text-align:center;
}

 

© 著作权归作者所有

共有 人打赏支持
闫亚亚
粉丝 1
博文 86
码字总数 30008
作品 0
济南
私信 提问
伪类&伪元素 - CSS精通之路

# 前言:   你的代码中是否每个标签都定义了一个类?完成一个页面后是否觉得代码很乱很拥挤?看见github优秀代码清爽简洁,想过你真的精通 ‘CSS’ 吗?想要进阶?不妨捡起CSS最容易被新手忽...

果汁凉茶丶
01/12
0
0
CSS2--入门到精通实用最全

**-----CSS2-----** 1.CSS特点简介 (1)CSS 指层叠样式表 (Cascading Style Sheets) (2)样式定义如何显示 HTML 元素 (3)样式通常存储在样式表中 (4)把样式添加到 HTML中是为了解决内容...

我是宁采臣
2016/12/08
0
0
理解伪元素 :before 和 :after

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪...

小菜鸡1
2016/11/15
22
0
理解伪元素 :Before 和 :After

  层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是...

Sherlock_z
2014/02/26
0
0
css中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上。伪类分为UI伪类和结构化伪类。 UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的...

sunshinewyf
2015/10/13
63
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript 继承使用解析

继承,通俗地说,之前你写过一些类,这些类中有一些是而你现在要写的类的功能的子集或者基本相同,那么你不用完全重新写一个新的类,你可以把之前写的类拿过来使用.这样的一种代码重用过程就叫做继...

前端攻城小牛
11分钟前
0
0
深入解析JavaScript 原型继承

JavaScript 原型继承,学习js面向对象的朋友可以看看。十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 Object.prototype JavaScript是...

前端攻城老湿
13分钟前
0
0
2018阿里云双12——年末钜惠,低至2折

活动链接地址:https://m.aliyun.com/act/team1212/?params=N.JlJCGqQNL4

城市之雾
14分钟前
0
0
VMware前路难测,多个厂家群雄逐鹿

导读 以VMware为例,虚拟机巨头公布了第二财季报告所示,它第二财季收入同比增长13%,达到了21.7亿美元,而且该公司收入和每股收益均超出预期。 在人们高谈Salesforce、亚马逊等新兴云计算厂...

问题终结者
15分钟前
0
0
Vuex的初探与实战小结

1.概述 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响...

peakedness丶
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部