css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下:
效果:
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Document
.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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
css实现文字中间横线,css实现文字居中两边横线效果的示例代码相关推荐
- html文字左右两边有居中的直线,css怎么实现文字居中两边横线效果
css怎么实现文字居中两边横线效果 发布时间:2021-03-19 09:50:44 来源:亿速云 阅读:92 作者:小新 这篇文章将为大家详细讲解有关css怎么实现文字居中两边横线效果,小编觉得挺实 ...
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
- html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- vue实现鼠标放上去就有提示_Vue实现鼠标经过文字显示悬浮框效果的示例代码
需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出butt ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...
- 快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
最新文章
- python3 namedtuple_你不能低估的Python数据结构Namedtuple(二)
- 【异常】Container exited with a non-zero exit code 1 Failing this attempt.Stack trace: ExitCodeException
- npm更改为淘宝镜像
- 下载服务器 linux系统,如何搭建Linux服务器
- 怎么在java中关闭一个thread
- Web后端学习笔记 Flask(7)数据库
- 免费暗黑3暗藏的危险
- 攻防世界 web高手进阶区 7分题 wtf.sh-150
- 我了解的软件测试基本概念
- TomExam开源在线考试系统
- javaFX 界面例子
- 为什么要做业务全场景的梳理?
- PS海报制作的常用方法
- dnf剑魂buff等级上限_DNF:护石2.0副本将至!新增“金币燃烧机”,30W点一下
- python调用有道翻译_python 简单的调用有道翻译
- 2021年中国海上风电行业发展现状分析,双碳循环下行业飞速发展「图」
- 衬线字体和无衬线字体区别_字体,字体和字体系列有什么区别?
- PyTorch+YOLOv5环境搭建(未完待续)
- 微信小程序-如何实现input等输入框禁止输入空格【亲测有效】
- table中cellspacing和cellspadding的用法
热门文章
- C++手敲Roberts_Prewitt_Sobel实现阈值分割
- DSX2-8000如何校准?校准流程?
- 【Linux环境搭建】十二、Linux(CentOS7) 时序数据库InfluxDB及Influx-proxy安装配置
- oracle索引介绍之位图(bitmap)索引
- 移动通信的一些技术名词英文缩写解释
- 【CSS3】边角 border-radius
- CIKM2020 | 最新9篇推荐系统相关论文
- Vivo手机实现录音转文字的方法,图文步骤详解,特别简单
- postgis转换简单geometry
- SQLServer2008 快捷键集合