<!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. vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网

    swiper是一个在切图中好用到不行的图片轮播插件,包括3d轮播.h5滑屏等复杂应用都不在话下,到了vue项目一切逻辑完全颠覆了,没有获取dom的概念,还好有 vue-awesome-swiper组件 ...

  2. Jmeter连接SqlServer数据库并操作

    jmeter支撑多种数据库,且均需要下载对应的驱动包,如下以SqlServer为例作为讲解,其他数据库类似. 1.下载jdbc驱动(注意下载对应版本),并放在jmeter的lib目录下,重启jmete ...

  3. Jupyter Notebook 常用快捷键 （转）

    Jupyter Notebook 有两种键盘输入模式. 编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的. 命令模式,键盘输入运行程序命令:这时的单元框线为蓝色. 命令模式 (按键 Es ...

  4. css flex弹性布局学习总结

    一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...

  5. EasyUI笔记（五）表单

    本系列只列出一些常用的属性.事件或方法,具体完整知识请查看API文档 Form(表单) 创建一个简单的HTML表单.构建一个包含id.action和method值的表单元素. <form id= ...

  6. 剑指offer-面试题34-二叉树中和为某一值的路径-二叉树遍历

    /* 题目: 输入一颗二叉树和一个整数,打印从根节点到叶子节点中所有和为该整数的路径. */ /* 思路: 先序遍历,深度遍历. 从树根开始,记录路径之和,遍历到叶子节点,如果和为期望值,则输出. 回 ...

  7. VUE项目编译和打包问题

    今天VPN不好使,所以准备看一下VUE前端的代码.因为是乙方新发过来的,所以想着先把代码跑起来.结果发现发过来的代码里没有node_modules. 解决方式 npm install express ...

  8. JSP页面取不到ModelAndView里面存的值

    方法1:在jsp页面上加上<%@ page isELIgnored="false" %>

  9. Python If&字典 初学者笔记

    and 当俩个条件都满足时为True否为False or 任意一个条件满足时为True否为Flase not in  通常用于If语句,用来判断一个元素是否不在某个列表中 banned_user = ...

  10. PAT (Basic Level) Practice （中文）1031 查验身份证 (15 分)

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...