<div class="title">
<h2 class="title-text"><span>工作经历</span></h2>
</div>

.title-text span {
display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
position: relative; /*定位横线(当横线的父元素)*/
.fs(14);
text-align: center;
}
.title-text span:before, .title-text span:after {
content: '';
position: absolute; /*定位背景横线的位置*/
top: 50%;
background: #8c8c8c; /*背景横线颜色*/
width: 35%; /*单侧横线的长度*/
height: 1px;
}
.title-text span:before {
left: 2%; /*调整背景横线的左右距离*/
}
.title-text span:after {
right: 2%;
}

css 怎么在文字两边加上横线的更多相关文章

  1. 利用after和before伪元素在文字两边写横线

    示例: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. css实现中间文字,两边横线效果

    1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...

  3. CSS文本与文字

    -255之间 14.2 CSS中的文字属性 属性名称                    属性值                       说明 font-style          norma ...

  4. TextView过长显示省略号, TextView文字中间加横线

    1.TextView显示的内容过长时自动显示省略号:  省略号的位置:android:ellipsize="end"   省略号在结尾android:ellipsize=" ...

  5. Linux中设置vim自动在运算符号两边加上空格

    vim中设置自动在=+-之类的运算符号左右两边加上空格.原版的vim不带这个功能,写出的代码例如z=x+y,不美观,很多编译器(如VS)能够自动在符号两边加上空格,如z = x + y,看起来比较美观 ...

  6. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  7. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  8. CSS笔记---文字两边对齐

    <style> .box{ width: 1000px; height: 500px; background-color: #aa0000; margin:0 auto; } .teste ...

  9. css实现一行文字居中,多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

随机推荐

  1. ws & websocket & 掉线重连

    ws & websocket & 掉线重连 reconnecting websocket https://github.com/joewalnes/reconnecting-webso ...

  2. 如何导出android内部存储的文件(不用root)

    这段时间公司项目,涉及到数据缓存,由于需要缓冲的数据太多.太大,通过网络请求,再缓存到本地sqlite数据库,太费时间,消耗流量.所以准备先在本地保存一个标准版sqlite数据库(包含数据),打包到a ...

  3. Flutter & QRCode App

    Flutter & QRCode App https://github.com/xgqfrms/qrcode-reader-app how to open android emulator o ...

  4. 手把手教你Spring Boot整合Mybatis Plus和Swagger2

    前言:如果你是初学者,请完全按照我的教程以及代码来搭建(文末会附上完整的项目代码包,你可以直接下载我提供的完整项目代码包然后自行体验!),为了照顾初学者所以贴图比较多,请耐心跟着教程来,希望这个项目D ...

  5. oracle之用户

    命令都是在命令行窗口执行 创建用户 1)登陆管理员用户 sqlplus system/密码 sqlplus system/briup 注意不要以分号结尾 2)创建用户 create user 用户名 ...

  6. clipse中mybatis的xml配置文件代码提示

    编写mybatis的xml文件时,没有代码提示会很麻烦,是有解决办法的: 按下图打开 点击右上角的Add按钮,添加配置,配置如下,添加后点击OK: Location:http://mybatis.or ...

  7. 换人!golang面试官:连怎么避免内存逃逸都不知道?

    问题 怎么避免内存逃逸? 怎么答 在runtime/stubs.go:133有个函数叫noescape.noescape可以在逃逸分析中隐藏一个指针.让这个指针在逃逸分析中不会被检测为逃逸. // n ...

  8. 2.5w字 + 36 张图爆肝操作系统面试题,太牛逼了!

    欢迎各位大佬访问我的 github ,跪求 star bestJavaer 大家好,我是 cxuan,我之前汇总了一下关于操作系统的面试题,最近又重新翻阅了一下发现不是很全,现在也到了面试季了,所以我 ...

  9. 如何进BAT,有了这个篇面试秘籍,成功率高达80%!!(附资料)

    多年前自己刚来北京找工作的时候,面了一个星期 面了七八家公司才拿到一个offer.而上次跳槽面了不到10家公司基本全过而且都给到了期望的薪资,本来自己在面试前没想到能够这么顺利,回想起来还是自己准备的 ...

  10. 操作系统---IO权限管理和敏感指令

    简化版 使用IOPL设置一个特权级的用户程序对所有端口的访问权限,使用I/O位图对一个特权级的用户程序设置个性化的端口访问权限(能访问部分端口.不能访问另外的端口). 用户程序的CPL<IOPL ...