如图:

html代码:

 <div class="detail-news">
<h5 class="detail-news-title">
<span>详细信息</span>
</h5>
</div>

css代码:

 .detail-news-title{
font-size: 16px;
font-weight: normal;
text-align: center;
padding-top: 10px;
position: relative;
}
.detail-news-title::before{
content: "";
display: block;
width: 60vw;
height: 1px;
background: #333;
position: absolute;
left: 50%;
margin-left: -30vw;
top: 18px;
}
.detail-news-title span{
padding: 0 10px;
background: #fff;
position: relative;
z-index:;
}

CSS实现:标题两侧画线效果的更多相关文章

  1. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. [游戏学习25] MFC 橡皮筋画线效果

    >_<:这是给出窗口内外不同情况的处理展示的例子. >_<:MouseCap.h #include<afxwin.h> class CMyApp :public C ...

  3. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  4. MFC画线功能总结

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...

  5. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  6. 画线缩放、瞳距缩放、Line延长到指定长度,内附效果,源码供应,解压就跑

    前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...

  7. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  9. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

随机推荐

  1. <转>赋值表达式解析的流程

    转自:http://www.cnblogs.com/nazhizq/p/6520072.html 上节说到表达式的解析问题,exprstate函数用于解析普通的赋值表达式.lua语言支持多变量赋值.本 ...

  2. MATLAB 的break语句和continue语句

    break语句: MATLAB中 break 语句用于终止 for 或 while 循环的执行,当在循环体内执行到该语句的时候,程序将会跳出循环,继续执行循环语句的下一语句. %% MATLAB br ...

  3. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

  4. lucene之中文分词及其高亮显示

    参考:http://www.cnblogs.com/lirenzhujiu/p/5914174.html http://www.cnblogs.com/xing901022/p/3933675.htm ...

  5. php自动获取字符串编码函数mb_detect_encoding(转)

    使用 mb_detect_encoding() 函数来判断字符串是什么编码的. 当在php中使用mb_detect_encoding函数进行编码识别时,很多人都碰到过识别编码有误的问题,例如对与GB2 ...

  6. 【Spring】Spring之浅析Spring框架的搭建

    Spring是什么 Spring是一个开源的容器框架,用于配置bean并且维护bean之间关系的.其主要的思想就是IOC(Inversion Of Control,控制反转)或者称作DI(Depend ...

  7. Idea集成Lombok代码注释来精简代码

    转载http://www.cnblogs.com/holten/p/5729226.html Lombok介绍及使用方法 lombok简介 lombok是暑假来到公司实习的时候发现的一个非常好用的小工 ...

  8. 项目记录25--unity-tolua框架 View02---BasePanel.lua

    还在,还在. ... . 每天晚上找点时间写点点,多了也不想学到底是什么心理啊. 写完看电影去. 今天写两个算超完毕了BaseUI.lua,UIManager.lua(完好中这个) local Bas ...

  9. Linux 4.10中两个新特性与我的一段故事

    今早5点半起来没有開始写文章,而是去西湾红树林连跑带走折腾了将近20公里.回来后就8点多了...洗了个澡之后坐稳当.開始写一段关于我的故事.        在2014年到2015年期间,我在负责研发一 ...

  10. J2EEweb开发中的缓存问题的研究

    一般情况下,浏览器都会缓存已经访问过的页面内容,关于如何禁止浏览器缓存的介绍,在网上到处都有相关的文章,但是,关于浏览器如何利用缓存,如何处理缓存的讲解,却鲜有人谈及 .浏览器在访问已缓存过的资源时, ...