css 怎么在文字两边加上横线
<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 怎么在文字两边加上横线的更多相关文章
- 利用after和before伪元素在文字两边写横线
示例: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- css实现中间文字,两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
- CSS文本与文字
-255之间 14.2 CSS中的文字属性 属性名称 属性值 说明 font-style norma ...
- TextView过长显示省略号, TextView文字中间加横线
1.TextView显示的内容过长时自动显示省略号: 省略号的位置:android:ellipsize="end" 省略号在结尾android:ellipsize=" ...
- Linux中设置vim自动在运算符号两边加上空格
vim中设置自动在=+-之类的运算符号左右两边加上空格.原版的vim不带这个功能,写出的代码例如z=x+y,不美观,很多编译器(如VS)能够自动在符号两边加上空格,如z = x + y,看起来比较美观 ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- css: transform导致文字显示模糊
css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
- CSS笔记---文字两边对齐
<style> .box{ width: 1000px; height: 500px; background-color: #aa0000; margin:0 auto; } .teste ...
- css实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
随机推荐
- virtual scroll list / dynamic dom list
virtual scroll list / dynamic dom list 虚拟滚动列表 1亿条数据的处理渲染方法 时间分片,不阻塞 DOM web workers 后台进程 Array buffe ...
- Flutter 获取本地图片并剪切
安装依赖 dependencies: ... image_picker: image_cropper android\app\src\main\AndroidManifest.xml 将UCropAc ...
- 超强嘉宾阵容——NGK Global启动大会圆满举办
近日,由星盟全球投资公司.灵石团队联合主办的NGK Global全球生态启动大会圆满开幕.大会汇集区块链领域.金融领域.密码学领域.智能算法领域等众多大咖,和NGK Global全球价值共识者共聚一堂 ...
- SpringBoot进阶教程(七十一)详解Prometheus+Grafana
随着容器技术的迅速发展,Kubernetes已然成为大家追捧的容器集群管理系统.Prometheus作为生态圈Cloud Native Computing Foundation(简称:CNCF)中的重 ...
- C++算法代码——统计数字
题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1109 题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000( ...
- 从微信小程序到鸿蒙js开发【08】——表单组件&注册登录模块
目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button ...
- 力扣1438. 绝对差不超过限制的最长连续子数组-C语言实现-中等难度
题目 传送门 文本 给你一个整数数组 nums ,和一个表示限制的整数 limit,请你返回最长连续子数组的长度,该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit . 如果不存在满足条 ...
- bluestein算法
我们熟知的FFT算法实际上是将一个多项式在2n个单位根处展开,将其点值对应相乘,并进行逆变换.然而,由于单位根具有"旋转"的特征(即$w_{m}^{j}=w_{m}^{j+m}$) ...
- Sapper:迈向理想的 Web 应用框架
扎稳阵脚,再进一步. 注意:原文发表于2017-12-31,随着框架不断演进,部分内容可能已不适用. 给迫不及待的小伙伴们的快速入门:Sapper 文档 和快速模板 starter template ...
- Linux下搭建RocketMQ环境
Apache 官网: http://rocketmq.apache.org/ RocketMQ 的 Github 地址: English:https://github.com/apache/rocke ...