<!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制作左右横线中间文字效果的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  3. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  4. 12、第十二节课，css伪类 （转）

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  5. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  6. css伪类 伪元素

    之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...

  7. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  8. HTML转义字符 Unicode和CSS伪类介绍

    CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. 腾讯云nginx配置https

    给腾讯nginx服务器配置https, 之前申请https配置后直接给node配置了,还没有用nginx. 按照 https://cloud.tencent.com/document/product/ ...

  2. ES读写数据过程及原理

    ES读写数据过程及原理 倒排索引 首先来了解一下什么是倒排索引 倒排索引,就是建立词语与文档的对应关系(词语在什么文档出现,出现了多少次,在什么位置出现) 搜索的时候,根据搜索关键词,直接在索引中找到 ...

  3. Vue的H5页面唤起支付宝支付

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...

  4. Centos 7 配置 NFS

    安装NFS包 yum install nfs-utils.x86_64 启动NFS服务需要首先启动rpcbind服务,这个rpcbind包已经在上面安装好了 先配置 /etc/exports 文件 v ...

  5. Linux开机加载过程

    2015-01-06 10:29:13   目录 1 开机加载简介 2 常规加载流程 2.1 加载BIOS 2.2 读取MBR 2.3 boot loader 2.4 加载内核 2.5 init依据i ...

  6. php函数的巧妙应用

    直接切入正题: 1.extract();函数从数组中把变量导入到当前的符号表中 对于数组中的每个元素,键名用于变量名,键值用于变量值. 第二个参数 type 用于指定当某个变量已经存在,而数组中又有同 ...

  7. Linux C++ 单链表添加，删除，输出，逆序操作

    /*单链表操作*/#include <iostream>using namespace std; class Node{ public: Node(){ next=0; } Node(in ...

  8. Nginx+uWSGI部署flask项目

    uwsgi配置 uwsgi安装 安装uwsgi pip install uwsgi 启动uwsgi uwsgin --ini uwsgi.ini # 后台启动 nohup uwsgi --ini uw ...

  9. 最短路-B - 六度分离

    B - 六度分离 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相识的人中间最多只隔着6 ...

  10. C# 索引器的理解和使用

    概述 此部分内容引用自MSDN文档 使用索引器可以用类似于数组的方式为对象建立索引. get 取值函数返回值. set 取值函数分配值. this 关键字用于定义索引器. value 关键字用于定义 ...