css实现标题左右横线

直接上代码

<div class='title'>快来设置吧</div>

.title {position: relative;font-size: 32px;color: #fff;height: 45px;line-height: 45px;text-align: center;top: 60px;
}
.title:before {content: "";position: absolute;width: 28px;height: 2px;top: 50%;background-color: #fff;left: 32%;
}
.title:after {content: "";position: absolute;width: 28px;height: 2px;top: 50%;background-color: #fff;right: 32%;
}

效果图

css实现标题左右横线相关推荐

html设置一条横线在标题的两侧,css实现标题左右横线
最近用到了记录一下页面马上邀请好友得奖励样式 .subtitle { position: relative; font-size: .24rem; color: #999999; height: ...
layui横线：带标题的横线（含代码、案例）
layui横线:带标题的横线(含代码.案例) 官方文档:https://www.layui.com/doc/element/auxiliar.html 案例· 截图: 代码示下: /* 分割线(含标题 ...
前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...
css 超长标题中间省略
重点是 :before 中加两个css属性 direction: rtl; float: right; <spantitle="CSS 测试标题,这是一个稍微有点长的标题,超出一行以后 ...
html按钮上的三个横线,html+css实现三条横线点击变叉导航菜单
使用html+css实现三条横线的菜单按钮,点击弹出列表菜单,菜单按钮变叉,点击叉按钮或点击列表项收回菜单: 点击按钮: 点击叉按钮或者菜单列表项都可以收回菜单. css代码: .inner-head ...
CSS实现标题右侧“更多”
HTML < h2>< a h ref="#" >标题< /a> < span>更多-< /span> < /h2 ...
HTML代码单元格内标题置顶,css表格标题怎么设置位置？
我们可以通过设置css caption-side属性的相关属性值来指定表格标题(caption标签)的位置,即:可以使用caption-side属性来指定了标题位于表格的哪一侧. 在table表格中, ...
html在字体两边加直线,CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
css 文字中间两边横线
先看效果图开始的时候两边的横杠我是用了两个标签去写的,现在想想这个写法好low,无脸面对各位前端同胞现在有更简单的方法,来,直接贴代码: .footer {width: 100%;height: ...

css实现标题左右横线

直接上代码

效果图

css实现标题左右横线相关推荐

最新文章

热门文章