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

Question

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

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

    <style>
        .Nav_bar_links div{
            margin: 0% 1%;
            font-weight: 500;
            display:inline-table;   
        }
        .Nav_bar_links div:hover{
            background: #222222;
            color: #E50000;
        }
    </style>

    <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">HOME</div>
                    <div class="add_on">ABOUT&nbsp;<i class="fas fa-caret-down"></i></div>
                    <div>SPONSORS</div>
                    <div>GALLERY</div>
                    <div>NEW &amp; UPDATES</div>
                    <div>CONTACT US</div>
                    </div>
            </div>

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

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>

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

How to display text in the middle of div with different background color?

html

css

web-deployment