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实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
随机推荐
- iframe & sandbox & 微前端
iframe & sandbox & 微前端 沙箱,容器,隔离 sandbox demo svg progress bar https://stackoverflow.com/ques ...
- vue & template & v-else & v-for bug
vue & template & v-else & v-for bug nested table bug https://codepen.io/xgqfrms/pen/wvaG ...
- Swift 5.1
Swift 5.1 WebView & WKWebView https://developer.apple.com/swift-playgrounds/ https://developer.a ...
- Web Animations API & SVG & requestAnimationFrame
Web Animations API WWAPI https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API https:/ ...
- django学习-22.admi管理后台页面的文案展示等相关配置
目录结果 1.前言 2.完整的操作步骤 2.1.第一步:对[settings.py]里的相关常量的值做如下修改 2.2.第二步:重启django项目[helloworld]的服务 2.3.第三步:重新 ...
- JVM Attach实现原理剖析
本文转载自JVM Attach实现原理剖析 前言 本文旨在从理论上分析JVM 在 Linux 环境下 Attach 操作的前因后果,以及 JVM 为此而设计并实现的解决方案,通过本文,我希望能够讲述清 ...
- 手把手教你使用IDEA2020创建SpringBoot项目
一.New Project 二.如图选择Spring Initalizr,选择jdk版本,然后点击Next(注意:SpringBoot2开始至少使用JDK1.8) 三.如图根据自己需要修改,然后点击N ...
- Js和JQuery基础
1.JavaScript的组成 CMAScript (核心):规定了JS的语法和基本对象 DOM 文档对象模型:处理网页内容的方法和接口 BOM 浏览器对象模型:与浏览器交互的方法和接口 2.Java ...
- Python镜像源集合——镜像源更改方法
python在线安装库时会较慢,那是因为python的默认镜像源在国外,因此会慢:而国内有很多可以用的python镜像源,将python镜像源更改为国内的,则可以大大加快python库的安装速度. 1 ...
- python类的内部方法
目录 一.绑定方法与非绑定方法 1.绑定方法 2.非绑定方法 二.property 1.什么是property? 2.为什么要用property? 3.如何使用property? 三.isinstan ...