<!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. P1832题解 A+B Problem（再升级）

    万能的打表 既然说到素数,必须先打素数表筛出素数, 每个素数可以无限取,这就是完全背包了. 这次打个质数表: bool b[1001]={1,1,0,0,1,0,1,0,1,1,1,0,1,0,1,1 ...

  2. exp导出含有双引号的表

    由于ORACLE默认的表名都是不区分大小写,在创建表时,在数据字典中存储的表名为大写.在有些情况下,如果创建的表在表名上加上双引号("),则创建的表其表名在数据字典中不作转换.比如 SQL& ...

  3. Hadoop学习之路(8)Yarn资源调度系统详解

    文章目录 1.Yarn介绍 2.Yarn架构 2.1 .ResourceManager 2.2 .ApplicationMaster 2.3 .NodeManager 2.4 .Container 2 ...

  4. 战“疫”背后的AI身影丨曼孚科技

    近期新型冠状病毒肺炎的疫情,牵动着全国上下人民的心. 截止2月11日上午10点,全国确诊人数已达42708人,疑似病例21675人. 突发的疫情让部分地区的快速诊疗能力出现了结构性的缺失,为了打赢这场 ...

  5. P1345 [USACO5.4]奶牛的电信Telecowmunication【最小割】【最大流】

    题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c),且a1与a2相 ...

  6. 2019牛客多校第八场 F题 Flowers 计算几何+线段树

    2019牛客多校第八场 F题 Flowers 先枚举出三角形内部的点D. 下面所说的旋转没有指明逆时针还是顺时针则是指逆时针旋转. 固定内部点的答案的获取 anti(A)anti(A)anti(A)或 ...

  7. JS实现轮播图特效（带二级导航）

    按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. Spring Boot源码（一）：去除web.xml

    访问https://spring.io/ spring boot中: public class MyWebApplicationInitializer implements WebApplicatio ...

  9. FirstJavaWeb

    (未完成)出错有点多,Tomcat的配置也出问题了,Tomcat突然找不到jdk了,好像是我之前下载过一回然后没卸干净有残留文件,还有连接数据库的代码也有问题.       <%@page im ...

  10. pandas学习笔记之删除指定列

    删除指定 def df["列名"] del df4["韩国地震影响"] 直接删除,df4中不在含有"韩国地震影响"这一列了 drop 不改变 ...