前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
网页模板 网络安全
精准搜索请尝试:精确搜索

css实现标题(或图片等)左右横线效果

2021-12-27 16:54:40 来源:原创 作者:寂静的神经

在设计网页时,很多时候要实现在标题(或图片等)元素两侧加上横线以突出主题的效果,比如:

我们可以通过 css 的 before 和 after 伪类来实现这个效果,代码如下:

.title:before{content:"";position:absolute;width:240px;height:2px;top:50%;background-color:#5a659f;left:18%;}
.title:after{content:"";position:absolute;width:240px;height:2px;top:50%;background-color:#5a659f;right:18%;}

实际效果:

零五网[https://www.02405.com]

注意事项:

父元素要设置 position:relative,其他属性根据实际情况调节即可。

本文关键词:

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1