css实现文字居中两边横线效果的示例代码
发布时间:2018-12-19 15:21:28 作者:Mandy 我要评论
这篇文章主要介绍了css实现文字居中两边横线效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下:
效果:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .title{ text-align: center; position: relative; height: 50px; line-height: 50px; width: 800px; margin: 200px auto; } .title:after,.title:before{ content: ""; position: absolute; top: 50%; background: #7a7a7a; height: 1px; width: 35%; } .title:after{ left: 0; } .title:before{ right: 0; } </style> </head> <body> <div class="title">css实现文字居中两边横线效果</div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
- 这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样2023-05-08
- CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解2023-05-06
- 本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2023-05-05
- 本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05
- Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,2023-05-04
- CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看2023-05-04
- 这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考2023-04-28
- 这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下2023-04-28
- 本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧2023-04-27
- 这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交2023-04-27
最新评论