CSS伪元素before,after制作左右横线中间文字效果
CSS伪元素before,after制作左右横线中间文字效果
企业网站制作过程中，经常需要用到如下的效果，这个时候可以使用CSS伪类实现：
实现效果
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.title {
color: #333;
text-align: center;
line-height: 1.1;
}
.title span {
display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
font-size: 30px;
color: #137c32;
font-weight: bold;
letter-spacing:5px; /*字间距*/
position: relative; /*定位横线（当横线的父元素）*/
}
.title span:before, .title span:after {
content: ''; /*不可少，否则伪类无效，CSS伪类用法*/
position: absolute; /*定位背景横线的位置*/
top: 52%;
background: #ccc; /*宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
.title span:before{
left: 35%; /*调整背景横线的左右距离*/
}
.title span:after {
right: 35%;
}
</style>
</head>
<body>
<div>OUR ADVATAGES<span>产品优势</span></div>
</body>
</html>示例说明
- content: ''; 伪类中必须有此标签，否则无法生效；
- 具体左右距离可根据实际尺寸灵活调整；
本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/518.html
为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。
内容有用
热门主题
相关阅读
- 使用jQuery实现同级元素class切换
- 苹果手机iOS设备，浏览器在 textarea 或 input 中输入文字时页面放大的解决办法
- select选择后直接跳转到其他网站的三种方式
- 详解CSS居中对齐的3种方式15个样例
- Echarts图表基本参数设置说明
- jQuery报错$(this).attr(‘checked‘)undefined/checkbox无法改变其状态的解决方法
- jq .html() 特效无效的解决办法
- 如何将iconfont中的字体图标全部展示在页面中
- HTML特殊字符符号大全
- jQuery清空input的值,清除标签内容的方法
- jQuery 获取相同 class元素的最后一个元素或id
- ajax传递data的三种传递方式
交流群
购物车
