bootstrap设计横线上加字

1.给横线上加字

.

2.思路：通过z-index实现，可以将父元素的z-index设置成2，而横线的z-index设置成-1，这样有字的地方就可以覆盖横线，再设置字的padding达到合理的宽度

（1）设置父元素类.text-with-hr的z-index

（2）设置横线的z-index

注意：设置border-bottom 就可以变成一条横线

（3）设计字体合理的padding

可以先给这个字体背景颜色设置green，方便对padding的大小进行调整

设置好之后，将背景颜色换成白色即可

 源码：

HTML

<div class="text-with-hr">
	<span>or</span>
</div>

CSS

.text-with-hr {
	text-align: center;
	position: relative;
	z-index: 2;
}
/*
横线，并通过z-index：-1将or附近的横线遮盖住
*/
.text-with-hr:before {
	position: absolute;
	content: '';
	top: 20px;
	left: 0px;
	width: 100%;
	border-bottom: 1px solid #d4d4d4;
	z-index: -1;
}
.text-with-hr span {
	display: inline-block;
	background: white;
	padding: 10px;
}

　　

 

转载于:https://www.cnblogs.com/GumpYan/p/7849939.html