文档章节

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

闫亚亚
 闫亚亚
发布于 2016/11/30 16:07
字数 159
阅读 54
收藏 0
点赞 0
评论 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
博文 64
码字总数 21891
作品 0
济南
伪类&伪元素 - CSS精通之路

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

果汁凉茶丶 ⋅ 01/12 ⋅ 0

CSS2--入门到精通实用最全

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

我是宁采臣 ⋅ 2016/12/08 ⋅ 0

理解伪元素 :Before 和 :After

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

Sherlock_z ⋅ 2014/02/26 ⋅ 0

理解伪元素 :before 和 :after

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

小菜鸡1 ⋅ 2016/11/15 ⋅ 0

CSS中的伪类和伪元素

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

Seven_7 ⋅ 2015/03/05 ⋅ 0

css中的伪类和伪元素

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

sunshinewyf ⋅ 2015/10/13 ⋅ 0

CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang ⋅ 2017/10/19 ⋅ 0

巧用伪元素和伪类让我们的html结构更清晰合理

css3为了区分伪类和伪元素,伪元素采用双冒号写法。 伪元素: [ 伪元素用于向某些选择器设置特殊效果,简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容,...

Neuro_annie ⋅ 2017/12/06 ⋅ 0

知道CSS有个CONTENT属性吗?有什么作用?有什么应用?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网css任务15,深度思考中的知识点——知道CSS有个CONTENT属性吗?有什么作用?有什么...

我是一只北极熊啊 ⋅ 2017/10/30 ⋅ 0

css基础整理(1)之css导入和选择器

最近一直在学JS,但总是觉得有些吃力,所以想把CSS和html的基础知识再整理一下,现在先复习一下CSS的导入,相对单位来常见的和选择器中常见的。 CSS的的外部样式表导入的两种方法: 1)使...

hyz000 ⋅ 2016/03/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 25分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 27分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 31分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 35分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 36分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 36分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 37分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 43分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 46分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部