利用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伪元素的 ...
随机推荐
- sklearn学习汇总
该博主总结的很好,https://www.cnblogs.com/hellcat/p/7531789.html 1.kaggle给出的导图 2.转化成树图: 3.sklearn工具导图
- Bash 如何取得当前正在执行的脚本的绝对路径？
转自:http://blogread.cn/it/article/6549?f=wb Bash 如何取得当前正在执行的脚本的绝对路径? 如题,一般我们写Shell脚本的时候,都倾向使用绝对路径,这样无 ...
- 【LibreOJ 6280】 数列分块入门 4 （分块）
题目:传送门 听说用define会使代码简洁qwq code: //By Menteur_Hxy #include<cstdio> #include<iostream> #in ...
- Elasticsearch 入门 - 安装、启动和配置
安装 请参阅elastic官网 :Installing Elasticsearch 启动 使用 ./bin/elasticsearch 命令即可启动 使用 ./bin/elasticsearch -d ...
- Android Drawable 那些不为人知的高效使用方法
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...
- Android 进程常驻（5）----开机广播的简单守护以及总结
这是一个轻量级的库,配置几行代码.就能够实如今android上实现进程常驻,也就是在系统强杀下,以及360获取root权限下.clean master获取root权限下都无法杀死进程 支持系统2.3到 ...
- 【解决】run-as: Package '' is unknown
问题: [2014-07-30 20:20:25 - nativeSensorStl] gdbserver output: [2014-07-30 20:20:25 - nativeSensorStl ...
- Debian以下的ntp服务(ntpdate)的安装
/********************************************************************* * Author : Samson * Date ...
- invalidate
转载请注明出处: 前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 .同时真挚地向渴望了解 A ...
- angularjs1-过滤器
<!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Typ ...