如何在具有不同背景颜色的div中间显示文本？

Question

我需要帮助，因为我不能这样做 请查看：https://i.imgur.com/bq9tz1i.jpg

我得到的是：https://i.imgur.com/24jOYhy.jpg

{{1}}

我想要达到同样的效果请帮助!!!!!!

Answer 1

我会将您的菜单项封装在span中，然后定位该DOM元素。这是一个片段示例：

.Nav_bar_links div {
	margin: 0% 1%;
	padding: 20px 10px;
	font-weight: 500;
	display: inline-block;
}
.Nav_bar_links div:hover {
	background: #222222;
	color: #e50000;
}
.Nav_bar_links div:hover span {
	padding-bottom: 5px;
	border-bottom: 3px solid #FF0000;
}

<div class="Navigation_bar">
	<img src="images/w-logo-1.png" height="7%" width="7%" align="middle">
	<div class="Nav_bar_links" align="right">
		<div class="active"><span>HOME</span></div>
		<div class="add_on"><span>ABOUT</span>&nbsp;<i class="fas fa-caret-down"></i></div>
		<div><span>SPONSORS</span></div>
		<div><span>GALLERY</span></div>
		<div><span>NEW &amp; UPDATES</span></div>
		<div><span>CONTACT US</span></div>
	</div>
</div>