<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. CSS3 & CSS var & :root

    CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackov ...

  2. js currying & js 科里化

    js currying & js 科里化 var test = ( function (a){ console.log(`a2 =`, a);// 1 // console.log(`b2 = ...

  3. 微信小程序 components

    微信小程序 components wx-xcx-components https://developers.weixin.qq.com/miniprogram/dev/component/ https ...

  4. [转]基于ROS平台的移动机器人-4-通过ROS利用键盘控制小车移动

    原文出处: https://blog.csdn.net/Forrest_Z/article/details/55002484 准备工作 1.下载串口通信的ROS包 (1)cd ~/catkin_ws/ ...

  5. vue中将分号去掉,将双引号变为单引号的配置

    在项目根目录下创建.prettierrc文件,文件内容如下: { "semi": false, "singleQuote": true } 实现vs code中 ...

  6. eclipse中lombok注解不生效

    现象:eclipse中在对象上使用lombok的@Data,引用get方法时,没有set.get方法. 解决办法: 1.在lombok官网(https://www.projectlombok.org/ ...

  7. JVisualVM监控JVM-外网服务器

    环境说明: a:阿里云服务器Centos8.2 b:JDK1.8 1:增加JMV运行参数 java -jar 启动时添加一下参数: -Djava.rmi.server.hostname=外网IP地址 ...

  8. 基于QT的全自动超声波焊接机上位机追溯系统(已经在设备上应用)

    应用说明: 本上位机程序是我在做锂电池产线项目的时候开发的,用于采集设备数据以及实现设备自动控制,下位机采用基恩士PLC,超声波机采用上海一家的超声波焊接机,实现电芯极耳的自动焊接,上位在设备焊接过程 ...

  9. uniapp封装uni.request请求

    封装一个uniapp请求 新建一个http.js文件封装uni.request const BASE_URL = process.env.NODE_ENV === 'development' ? '' ...

  10. HDOJ-6665(离散化+DFS求连通分量)

    Calabash and Landlord HDOJ-6665 这里考察的是离散化的知识. 首先将所有的x坐标和y坐标放入两个数组中,然后对这两个数组进行排序.因为总共的坐标数就5个所以这两个数组的大 ...