中间带文字的hr分割线

<hr class="hr">

.hr {color: #000;border: 0;font-size: 12px;padding: 10px 0;position: relative;
}
.hr::before {content: "分隔线";position: absolute;padding: 0 10px;line-height: 1px;border: solid red;border-width: 0 100vw;white-space: nowrap;left: 50%;transform: translateX(-50%);
}

中间带文字的hr分割线相关推荐

页面布局——分割线中间带文字
.box可设置height.line-height .text可设置margin 上下居中可使用vertical-align:middle;或justify-content:center; 左右 ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
css实现文字两边的分割线
<div class="xian"><span class="txt">分割线文字 <br>English text< ...
css分隔线中间带文字
http://www.daqianduan.com/4258.html http://www.daqianduan.com/example?pid=4258
CSS 分隔线中间带文字分隔符
HTML部分: <div class="order"><span style="white-space:pre"> </span& ...
echarts 有引导线和内部文字_上进青年研习社丨设计入门02：平面设计之平面构成中的线...
文丨姜哥点.线.面是平面构成的三大基本元素.在<设计入门01丨不知道这一"点",学再多技能也不会设计>中为大家介绍了点的理论知识及在设计中的用法,今天接着来说说第二个 ...
深入理解文字高度和行高的设置
font-size设置的是什么?line-height设置的是什么?各种行高是怎么计算出来的?你真的知道吗? 1 从font-size讲起,说文字高度: 当你按住鼠标左键选中一段文字的时候,这段文字背 ...
day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签: ...
前段第44天------前端、前端三剑客、HTML
一.前端定义:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页. 前端技术:前端设计:一般可以理解为网站的视觉设计前端开发:网站的前台代码实现,包括基本的HTML和CSS以及 ...

中间带文字的hr分割线

中间带文字的hr分割线相关推荐

最新文章

热门文章