利用after和before伪元素在文字两边写横线
示例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素after和before的用法</title>
<style>
.container{
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
h3.title {
color: #F2AE11;
font-size: 1.3em;
margin-bottom: 3em;
text-align: center;
font-weight: 500;
line-height: 1.1;
}
h3.title span {
display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
font-size: 3em;
color: #212121;
position: relative; /*定位横线（当横线的父元素）*/
}
h3.title span:before, h3.title span:after {
content: ''; /*CSS伪类用法*/
position: absolute; /*定位背景横线的位置*/
top: 52%;
background: #494949; /*宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
h3.title span:before{
left: 25%; /*调整背景横线的左右距离*/
}
h3.title span:after {
right: 25%;
}
</style>
</head>
<body>
<div class="container">
<h3 class="title">I love you<span>Hello</span></h3>
</div>
</body>
</html>
我来分割线-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
新增渐变色，效果图类似下面
h3.title span:before, h3.title span:after {
content: ''; /*CSS伪类用法*/
position: absolute; /*定位背景横线的位置*/
top: 52%;
/* background: #494949; 宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
h3.title span:before{
left: 25%; /*调整背景横线的左右距离*/
background:linear-gradient(to left,#b6b6b6,#efefef);
}
h3.title span:after {
right: 25%;
background:linear-gradient(to left,#efefef,#b6b6b6);
}
可以试一下以下的代码：是一个渐变的效果
<div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1px;"></div>
利用after和before伪元素在文字两边写横线的更多相关文章
- 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
- 巧妙利用before和after伪类实现文字的展开和收起
需求:一段文字,当收起的时候,显示4行,并且多余4行的部分用省略号表示,关键是在省略号前面留有空白部分来放一些图标等东西:展开的时候,全部显示. 例如下面的示例图: 收起的时候: 展开的时候: 在不用 ...
- css 怎么在文字两边加上横线
<div class="title"> <h2 class="title-text"><span>工作经历</span ...
- css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
- css伪元素详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
- Effective前端4：尽可能地使用伪元素
伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...
- CSS3新增选择器：伪元素选择器
一. ::first-letter 第一个字 二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...
- 关于css伪类，伪元素详解总结
伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...
随机推荐
- 网络教程(8）IP协议
两台计算机间不是直接连接的,所以不能使用PPP协议,那么它们是怎么链接的呢? host A想把信息传给host B ethernet帧中的目标mac地址传到SFO后开始使用PPP协议 [Media ...
- docker-compose,docker-machine,docker swarm 的简单总结
1.docker-compose: 用来在单机上启动一组应用服务.这个服务中可能包含有很多应用,比如你的app服务,redis,mysql,等等. (1)我们需要先创建好docker-compose的 ...
- 在Tomcat中配置域名：linux下的配置
域名的配置 端口要改成80 找到/usr/tomcat/apache-tomcat-8.5.30/conf的目录,找到server.xml文件,到 <Host name="localh ...
- CF909B Segments
CF909B Segments 题意翻译 题目描述 给你一个整数N.考虑坐标轴上所有可能的部分,在整数点上的端点,坐标在0到N之间,包括它们. 您希望在几个层中绘制这些片段,这样在每个层中这些片段就不 ...
- 基本socket api
socket函数,为了执行网络I/O,一个进程必须做的第一件事就是调用socket函数,并且指定通信协议类型. #include<sys/socket.h> int socket (int ...
- Java&Xml教程（十一）JAXB实现XML与Java对象转换
JAXB是Java Architecture for XML Binding的缩写,用于在Java类与XML之间建立映射,可以帮助开发人员非常方便的將XML和Java对象进行相互转换. 本文以一个简单 ...
- RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能
RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能 转眼间RDIFramework.NET框架走了快6个年头了,随着一个版本号一个版本号的升级改造,如今已经越来越完美 ...
- 本地自旋锁与信号量/多服务台自旋队列-spin wait风格的信号量
周日傍晚,我去家附近的超市(...)买苏打水,准备自制青柠苏打.我感觉我做的比买的那个巴黎水要更爽口.由于天气太热,非常多人都去超市避暑去了,超市也不撵人,这仿佛是他们的策略.人过来避暑了,走的时候难 ...
- Linux环境thinkphp配置以及数据源驱动改动
项目中须要用到thinkphp,以下简称tp. linux版本号:64位CentOS 6.4 Nginx版本号:nginx1.8.0 php版本号:php5.5.28 thinkphp版:3.2.3 ...
- 网页爬虫框架jsoup介绍
序言:在不知道jsoup框架前,因为项目需求.须要定时抓取其它站点上的内容.便想到用HttpClient方式获取指定站点的内容.这样的方法比較笨,就是通过url请求指定站点.依据指定站点返回文本解析. ...