文档章节

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

闫亚亚
 闫亚亚
发布于 2016/11/30 16:07
字数 159
阅读 97
收藏 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
博文 80
码字总数 28688
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

Java Lock接口分析之ReentantReadWriteLock

ReentantReadWriteLock读写锁,在读线程多余写线程的并发环境中能体现出优异的性能,相比于synchronized与ReentrantLock这种独占式锁的模型,ReentantReadWriteLock采用独占式写锁与共享式读...

我爱春天的毛毛雨
33分钟前
1
0
EFK (Fluentd ElasticSearch Kibana) 采集nginx日志

本文描述如何通过FEK组合集中化nginx的访问日志。本人更喜欢按顺序来命名,所以使用FEK而不是EFK. 首先在nginx服务器上执行以下操作. 安装ruby http://blog.csdn.net/chenhaifeng2016/artic...

xiaomin0322
35分钟前
1
0
一键下载:将知乎专栏导出成电子书

老是有同学问,学了 Python 基础后不知道可以做点什么来提高。今天就再用个小例子,给大家讲讲,通过 Python 和爬虫,可以完成怎样的小工具。 在知乎上,你一定关注了一些不错的专栏(比如 ...

crossin
44分钟前
2
0
synchronized 之 对象锁 和 类锁

一、synchronized(object) 如果object没有被加锁,则获取object的锁;如果object已经被加锁则等待object的锁被释放。 二、需要加锁的情景 多线程共享同一资源会引起线程安全的情况下,才需要...

MyOldTime
45分钟前
7
0
tomcat 单机/多机 部署多应用

一.单机部署多应用: 1.在 linux 下解压安装两个 tomcat:tomcat1, tomcat2; 2.修改 /etc/profile, 增加 tomcat 环境变量: path 中加上 重新加载配置文件 source /etc/profile 3.修改 tomc...

imbiao
56分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部