如图:

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. Ubuntu远程桌面,如何退出全屏

    首先安装Linux 下远程桌面客户端软件-rdesktop 打开终端 执行sudo apt-get install rdesktop 远程连接XP 系统(前提是windows xp 必须打开并且允许远 ...

  2. ajax请求格式

    ajax请求格式........... var rowsData = $('#receiptPrintList').datagrid('getSelections'); $.ajax({ type: ...

  3. Instagram/IGListKit 实践谈(UICollectionView框架)

    简单介绍 IGListKit是Instagram推出的新的UICollectionView框架,使用数据驱动,旨在创造一个更快更灵活的列表控件. github地址:https://github.com ...

  4. 树莓派进阶之路 (015) - 树莓派使用DS18B20模块测量温度

    参考:http://shumeipai.nxez.com/2013/10/03/raspberry-pi-temperature-sensor-monitors.html 第一步,允许单总线接口 su ...

  5. Redis学习之路(003)- hiredis安装及测试

    一. hiredis下载地址及C API  github下载:https://github.com/redis/hiredis 安装脚本: #!/bin/zsh git clone https://g ...

  6. 使用Nexus搭建Maven服务器详细配置【转】

    为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建nexus私服,然后开发人员连到 ...

  7. MongoDB----逻辑与物理存储结构

    基本的操作 一.常用的命令和基础知识 1.进入MongoDB shell 首先我们进入到MongoDB所在目录执行 cd /work/app/mongodb/bin/ #启动 ./mongo 为了方便 ...

  8. SQL Tuning Advisor

    SQL Tuning Advisorsql调优顾问可提供的建议有:-收集对象的统计信息-创建索引-重写sql语句-创建sql profile-创建sql plan baseline SQL Tunin ...

  9. 【转】我的第一次和最后一次 Hackathon 经历

    我的第一次和最后一次 Hackathon 经历 在旧金山地区经常有一些叫做“Hackathon”的活动,吸引挺多人参加.我一直听说这个名字,可是一直不知道它到底是什么.我从来对竞赛式的活动不感兴趣,我 ...

  10. ekho安装及测试(中文文字转语音)

    1. 官网下载源码包 地址:http://www.eguidedog.net/ekho.php 2. 安装 xz -d ekho-7.5.tar.xz tar -xvf ekho-7.5.tar ap ...