用伪元素画横线，并使用一个盒子覆盖一部分

最新推荐文章于 2022-06-22 17:08:42 发布

zlzzlloo

最新推荐文章于 2022-06-22 17:08:42 发布

阅读量401

点赞数 1

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_52166438/article/details/120597041

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码及解释

不要直接copy代码，里面的注释会使程序运行错误，要删掉注释才能运行

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.before{
		position:relative;
		margin-top:10%;
		text-align:center;
	}
	.before:before{
		content: '';//必须使用它
		width: 100%;//设置横线宽高
    	height: 4px;
		background-color: #000;//横线颜色
		position: absolute;
    	left:0;
	}
	.before span{
		display: inline-block;
		background-color: #fff;//这一行和下面那一行搭配起来使横线看起来像中断了一部分
		color: #292b36;//其实就是使span覆盖了一部分横线
		padding: 0 6%;//使span宽增大
		position:relative;
		top:-20px;
		font-size:40px;
	}
</style>
</head>
<body>
	<div class="before">
    	<span>
        	联系
        </span>
    </div>
</body>
</html>

看了上面的注释应该就理解了

zlzzlloo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用伪元素画横线，并使用一个盒子覆盖一部分

效果代码及解释不要直接copy代码，里面的注释会使程序运行错误，要删掉注释才能运行<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> .before{ position:rel
复制链接

扫一扫