CSS伪类before，after制作左右横线中间文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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">Welcome to <span>Snapshot</span></h3>
<div class="row">
<img src="data:images/hz01.jpg" width="300" height="200">
</div>
</div>
</body>
</html>
总结：
1，这种方法比利用边框和背景图做出的效果更好更利于控制和修改
2，缺点是伪类在IE8上兼容有些问题
CSS伪类before，after制作左右横线中间文字效果的更多相关文章
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- 12、第十二节课，css伪类 （转）
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- Java连载73-String方法简介
一.字符串常用的方法 package com.bjpowernode.java_learning; public class D73_StringMethodBriefIntroduction { ...
- mysql必知必会--数 据 过 滤
如何组合 WHERE 子句以建立功能更强的更高级的搜索条件?如何使用 NOT 和 IN 操作符? 组合 WHERE 子句 第6章中介绍的所有 WHERE 子句在过滤数据时使用的都是单一的条 件.为了进 ...
- 刷题79. Word Search
一.题目说明 题目79. Word Search,给定一个由字符组成的矩阵,从矩阵中查找一个字符串是否存在.可以连续横.纵找.不能重复使用,难度是Medium. 二.我的解答 惭愧,我写了很久总是有问 ...
- Umi 小白纪实（一）—— 创建项目&常用配置
umi 是一个企业级 react 应用框架,也是蚂蚁金服的底层前端框架 <蚂蚁金服的前端框架和工程化实践> 一.安装脚手架 在创建项目之前,需要保证有 node 8.10 以上的环境 可以 ...
- vue(六)--计算属性（computed）
计算属性关键词: computed demo1: <div id="app"> <p>原始字符串: {{ message }}</p> < ...
- Linux学习记录(二)：常用工具
博主使用的操作系统为Ubuntu tmux 终端分屏 安装 Ubuntu使用apt-get安装 sudo apt-get install tmux 使用 默认命令键:Ctrl + B %(百分号) 左 ...
- TypeScript（进行中）
https://ts.xcatliu.com 简介 什么是 TypeScript 即使不显式的定义类型,也能够自动做出类型推论 即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件 ...
- 解决kbmMW Scheduler在任务中停止任务遇到的问题
procedure TCustomGridViewCameraDoc.InitSchedule; begin Scheduler.Schedule( procedure(const ASchedule ...
- 怎么解决Chrome浏览器“Failed to load resource: net::ERR_INSECURE_RESPONSE”错误？
用科学方法安装的arcgisServer,需要修改系统时间,但是修改了系统时间,可能会出各种问题, office 不能正确验证,chrome 不能正常使用,访问网页, 如果直接输入本地地址进行访问的话 ...
- 关于Spring注入参数到static静态参数失败问题处理。解决Autowired annotation is not supported on static fields的问题
直接贴代码 把注入参数的注解加到set方法上面去即可. 因为这是一个工具类用到的config,所以一开始没有加@Component,还是依然为空,加上之后就正常能注入了