<!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. 回炉重造之重读Windows核心编程-001-错误处理

    Windows处理错误靠的是API的返回值,类型不止一种种: VOID,函数不可能失败,Windows API的返回值很少是这个情况. BOOL,如果函数失败,则返回值是0,否则返回是非零值.不要测试 ...

  2. vue(二)--条件语句

    条件语句:v-if     v-else   v-else-if    v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...

  3. UI设计的定义和view、viewgroup及其一些常用属性

    1.uI设计 UI设计就是用户界面设计,比如QQ登录界面.聊天界面等,进行UI设计将会用到View和Viewgroup. 2.view 在安卓中可以理解为视图,在安卓中占用一块矩形区域,负责提供主件绘 ...

  4. Selenium实战（六）——数据驱动应用

    一.数据驱动 由于大多数文章和资料都把“读取数据文件”看做数据驱动的标志,下面创建一个baidu_data.csv文件: 文件第一列为测试用例名称,第二列为搜索的关键字.接下来创建test_baidu ...

  5. MY_0002：导出单位设置

    1,导出模型给canvas工具用时,设置单位为m,再参考模型所占网格大小.

  6. Codeforces Round #622（Div 2）C2. Skyscrapers (hard version)

    题目链接 : C2. Skyscrapers (hard version) 题目描述 : 与上一道题类似,只是数据范围变大, 5e5, 如果用我们原来的方法,铁定是超时的. 考察点 : 单调栈,贪心, ...

  7. Python 用户输入&while循环 初学者笔记

    input() 获取用户输入(获取的都是字符串哦) //函数input()让程序停止运行,等待用户输入一些文本. //不同于C的是可在input中添加用户提示,而scanf不具备这一特性. //提示超 ...

  8. 将smarty安装到MVC架构中

    首先是composer.json { "require": { "smarty/smarty": "^3.1" }, // 自动加载 // ...

  9. sublime 下载 和 破解

    新增可用注册码,无需降级. Sublime Text 3.1 更改了验证方法,之前所有的验证码都已失效,建议降级到3143 版本. 新增3.1 3176 可用注册码 此验证码为sublime text ...

  10. oracle卸载步骤

    一.删除产品 1. 停服务,进入下图,一个个删除Oracle产品,再执行卸载 二.清注册表,开始-搜索- 输入regedit,进入注册表 1.选择HKEY_LOCAL_MACHINE\SOFTWARE ...