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实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
随机推荐
- React Native & CodePush & App Center
React Native & CodePush & App Center https://docs.microsoft.com/en-us/appcenter/distribution ...
- JS Calendar API
JS Calendar API js 如何获取当天是周几(一周的第几天) const date = new Date(); // Mon Mar 23 2020 15:15:36 GMT+0800 ( ...
- 专注于大数据分析和数字基建,星盟UICI切入资产管理领域
资产管理行业体系庞大,按领域可以大致分为公募.私募.券商.保险.银行.信托六大领域.面对六大领域百万亿级市场,近年来,也出现了不少初创公司针对资产管理的细分领域提供专有解决方案.而星盟全球投资公司就是 ...
- django学习-13.通过pk值手动设置数据表主键
1.前言 通过django框架的Model层来新增数据库表时,如果在需要新增的表字段里任何一个表字段都没设置主键,框架会默认新增一个表字段id并把该表字段id设置为主键. 那么,如果我们想自己动手设置 ...
- C++算法代码——奖学金
题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1098 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学 ...
- 刚学会 C++ 的小白用这个开源框架,做个 RPC 服务要多久?
本文适合有 C++ 基础的朋友 本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍基于 C++ 的 RPC 开源框架--rest ...
- 答不上的JUC笔试题
1:有一个总任务A,分解为子任务A1 A2 A3 ...,任何一个子任务失败后要快速取消所有任务,请写程序模拟. 「请寻求最优解,不要只是粗暴wait()」 本题解题思路:Fork/Join 通常使用 ...
- Go的切片
目录 切片 一.切片的创建 1.先创建数组,再引用 二.切片的修改 三.切片的长度和容量 四.使用make创建切片 五.切片的修改和追加 1.修改 2.追加:append 六.切片的函数传值 七.多维 ...
- Django-1.11中文文档——操作关联对象
关联对象参考 写在最前面--基础示例模型如下: from django.db import models class Blog(models.Model): name = models.CharFie ...
- Adapper 入门
Adapper 入门 特点 单实体实现自动装配.连表查询需要自己处理装配,查看查询. 原生sql语句. 连接接口: IDbConnection connection = new SqlConnecti ...