如图:

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. 单个APP页面支持屏幕旋转

    1.info中支持所有的方向 2.APPDelega.h中添加属性 @property (nonatomic,assign) BOOL allowRotate; APPdelegate.m中实现方法 ...

  2. 【LeetCode】215. Kth Largest Element in an Array (2 solutions)

    Kth Largest Element in an Array Find the kth largest element in an unsorted array. Note that it is t ...

  3. java线程池的应用

    package com.test; import java.util.concurrent.Callable; public class TestThread implements Callable& ...

  4. Spring 注解 hibernate 实体方法 <property name="packagesToScan" value="com.sise.domain"/>

    <property name="annotatedClasses"> <list> <value>com.sise.domain.Admin&l ...

  5. hibernate的findByExample 外键参数查询解决方案

    用了这么长时间的hibernate/spring,如果不是今天用的findByExample方法到现在还不知道findByExample的机制.惭愧 Class User{String usernam ...

  6. 启动mysql报错 -- ERROR! The server quit without updating PID file

    开发说某个测试环境的mysql,无法重启了,报以下错误提示: # service mysqld restart Shutting down MySQL.. SUCCESS! Starting MySQ ...

  7. sql改写or 改成union不等价数据变多

    select count(*) from (SELECT A.* FROM (SELECT CD.*, nvl(CV.SUM_CI_BALANCE, 0) as SUM_CI_BALANCE, nvl ...

  8. Android资源文件 - 使用资源存储字符串 颜色 尺寸 整型 布尔值 数组

    一. Android资源文件简介 1. Android应用资源的作用 (1) Android项目中文件分类 在Android工程中, 文件主要分为下面几类 : 界面布局文件, Java src源文件, ...

  9. 用python做网页抓取与解析入门笔记[zz]

    (from http://chentingpc.me/article/?id=961) 事情的起因是,我做survey的时候搜到了这两本书:Computational Social Network A ...

  10. logtash 接收多配置文件

    [root@10-19-148-59 etc]# vim front_esb.conf input { beats { type => beats port => 5077 } } fil ...