CSS伪元素before|CSS伪元素before,after制作左右横线中间文字效果
【CSS伪元素before|CSS伪元素before,after制作左右横线中间文字效果】::before和::after伪元素的用法 请参考http://www.cnblogs.com/starof/p/4459991.html
文章图片
效果图
Title - 锐客网 .container{
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
h3.title {
color: #F2AE11;
font-size: 1.3em;
margin-bottom: 3em;
text-align: center;
font-weight: 500;
line-height: 1.1;
}
h3.title span {
display: block;
/*设置为块级元素会独占一行形成上下居中的效果*/
font-size: 3em;
color: #212121;
position: relative;
/*定位横线（当横线的父元素）*/
}
h3.title span:before, h3.title span:after {
content: '';
/*CSS伪类用法*/
position: absolute;
/*定位背景横线的位置*/
top: 52%;
background: #494949;
/*宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
h3.title span:before{
left: 25%;
/*调整背景横线的左右距离*/
}
h3.title span:after {
right: 25%;
}Welcome to Snapshot
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 3.css浮动
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- “始作俑者”是伪命题
- 【杂序】最虚伪莫过于兄弟情义
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 忙碌是个伪命题
- 跳出“伪学习”，做一个“知行合一”的践行者
- 第六课|第六课 js管理页面元素位置大小