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
为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。
内容有用