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;
}