How to remove border from nested element?

<div class="navbar navbar-default">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
 <span class="sr-only">Open navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>
</div>
 <div class="collapse navbar-collapse" id="responsive-menu">
 <ul class="nav navbar-nav">
 <!-- <li class="active"><a href="#">Link<span class="sr-only"></span></a></li> -->
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">About the community<span>&nbsp;/</span><b class="caret"></b></a>
 <ul class="dropdown-menu">
 the <li><a href="#">Organizational structure</a></li>
 the <li><a href="#">Board</a></li>
 the <li><a href="#">Honorary members</a></li>
 the <li><a href="#">Members and participants</a></li>
 the <li><a href="#">Charter</a></li>
 the <li><a href="#">registration Certificate</a></li>
 the <li><a href="#">reports, orders</a></li>
</ul>
</li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Join<span>&nbsp;/</span><b class="caret"></b></a>
 <ul class="dropdown-menu">
 the <li><a href="#">Membership</a></li>
 the <li><a href="#">Preferences</a></li>
</ul>
</li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">news<span>&nbsp;/</span><b class="caret"></b></a>
 <ul class="dropdown-menu">
 the <li><a href="#">Directions</a></li>
 the <li><a href="#">Business <br>correspondence</a></li>
 the <li><a href="#">Zasedeniye Board</a></li>
</ul>
</li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Activities<span>&nbsp;/</span><b class="caret"></b></a>
 <ul class="dropdown-menu">
 the <li><a href="#">Directions</a></li>
 the <li><a href="#">Business <br>correspondence</a></li>
 the <li><a href="#">Zasedeniye Board</a></li>
</ul>
</li>

 the <li><a href="#">Classification<span>&nbsp;/</span></a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events<span>&nbsp;/</span><b class="caret"></b></a>
 <ul class="dropdown-menu">
 the <li><a href="#">all-Russian mass competitions</a></li>
 the <li><a href="#">all-Russian Congresses of the fitness industry</a></li>
</ul>
</li>

 the <li><a href="#">Publications<span>&nbsp;/</span></a></li>
 the <li><a href="#">Contacts<span>&nbsp;/</span></a></li>
</ul>
</div>

 </div>


.navbar-default {
 font-family: 'Bebas', sans-serif;
 font-size: 28px;
 font-weight: bold;
 text-transform: uppercase;
 border: 0px;
 margin: 20px 0px 15px 0px;
 background: transparent;
}

.navbar-default .navbar-nav>li>a {
color:#d0a82c;
}

.navbar-default .navbar-nav>li:hover>a {
 border-bottom: 4px solid #a70a39;
 -webkit-transition: all;
 -webkit-transition-duration: 600ms;
 /*background-color: #000;*/
 /*margin: 0px 6px 0px 0px;*/
 color: #d0a82c;
}

.navbar {
 min-height: 54px;
}

.navbar-nav>li>a {
 padding-left: 0px;
 padding-right: 0px;
 margin-right: 5px;
}

.navbar-default .navbar-nav>li>a span {
 display: inline-block;
}


5bd6a0c56bede523686685.jpeg

Sorry that is not in the online editor.
In the picture menu. The menu separator (slash) is you the span tag how to make that under him seemed to border.
Border I have defined here .navbar-nav>li:hover>a , and the tag "a" respectively of the span. I have found examples where using as it is not possible to do it but in their own way could not shift. Border must end at the last letter of the word and not to lick but to span as span inside it, the result you see.
March 12th 20 at 16:53
2 answers
March 12th 20 at 16:55
Solution
.navbar-default .navbar-nav > li:hover > a > span:first-child {
 border-bottom: 4px solid #a70a39;
 -webkit-transition: all;
 -webkit-transition-duration: 600ms;
 color: #d0a82c;
}

I have no idea who makes such uporotyh layout, putting divider in one wraper with the item. Can only suggest to wrap the navigation text in another span.

Even better all of the links to remove this element and add after
.dropdown > a > span:first-child {
 border-bottom: 4px solid #a70a39;
 -webkit-transition: all;
 -webkit-transition-duration: 600ms;
 color: #d0a82c;
}
.dropdown > a:after{
 content:'/'; 
 visibility: visible;
 padding: 5px;
 color: #d0a82c;
}


Anyways about something like that

https://codepen.io/Berry.Kerlu/pen/WaWjyK
did not help , and if you think about it, and could not help the span tag no border - Cory.Bradtke commented on March 12th 20 at 16:58
@Cory.Bradtke, you just have to kill the designer who did it all. Updated the answer - Berry.Kerlu commented on March 12th 20 at 17:01
@Berry.Kerlu, recommend courses here honestly I'll be thanking you , not typeset I I rework something but the man who typeset I know him. Let's grow! - Cory.Bradtke commented on March 12th 20 at 17:04
@Cory.Bradtke, but there are not courses you need, but just to explore the possibilities of css documents and to use them properly. - Berry.Kerlu commented on March 12th 20 at 17:07
Yes, wanted to say , probably all realized that bootstrap and there is no not one custom class
the only maybe I went the wrong way down the ul-tag the person added your classes, I walked away from that because I decided to rewrite existing but I particularly didn't touch the background removed border around the entire menu and added a border-bottom. - Cory.Bradtke commented on March 12th 20 at 17:10
March 12th 20 at 16:57
.navbar-default .navbar-nav>li:hover>a {border-bottom: 0;}

Find more questions by tags CSS