Как убрать border у вложенного элемента?

Question

[karpos]

<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">Открыть навигацию</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="#">Ссылка<span class="sr-only"></span></a></li> -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">О сообществе<span>&nbsp;/</span><b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Организационная структура</a></li>
                            	<li><a href="#">Правление</a></li>
                            	<li><a href="#">Почетные члены</a></li>
                           	 	<li><a href="#">Члены и учасники</a></li>
                            	<li><a href="#">Устав</a></li>
                            	<li><a href="#">Свидетельство о регистрации</a></li>
                            	<li><a href="#">Протоколы, приказы</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Вступить<span>&nbsp;/</span><b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Членство</a></li>
                           		<li><a href="#">Преференции</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Новости<span>&nbsp;/</span><b class="caret"></b></a>
							 <ul class="dropdown-menu">
                            	<li><a href="#">Направления деятельности</a></li>
                            	<li><a href="#">Деловая <br>корреспонденция</a></li>
                            	<li><a href="#">Заседения правления</a></li>
                        	</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Деятельность<span>&nbsp;/</span><b class="caret"></b></a>
							 <ul class="dropdown-menu">
                            	<li><a href="#">Направления деятельности</a></li>
                            	<li><a href="#">Деловая <br>корреспонденция</a></li>
                            	<li><a href="#">Заседения правления</a></li>
                        	</ul>
						</li>
						
						<li><a href="#">Классификация<span>&nbsp;/</span></a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Мероприятия<span>&nbsp;/</span><b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Всероссийские массовые соревнования</a></li>
                            	<li><a href="#">Всероссийские Съезды фитнес-индустрии</a></li>
                        	</ul>
						</li>
						
						<li><a href="#">Публикации<span>&nbsp;/</span></a></li>
						<li><a href="#">Контакты<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;
}

Извиняюсь что не в онлайн редакторе.
На картинке меню. Разделитель меню (слешь) находится вы теге span как сделать чтоб под ним не показывался border.
Border у меня определяется тут .navbar-nav>li:hover>a , а в теге "a" соответственно span. Я нашел примеры где как то через :not можно это сделать но на свой лад не смог переложить. Border должен заканчиваться на последней букве слова и не зализать на span но так как span внутри него то результат вы видите.

Answer 1

[Алексей]

.navbar-default .navbar-nav > li:hover > a > span:first-child {
  border-bottom: 4px solid #a70a39;
  -webkit-transition: all;
  -webkit-transition-duration: 600ms;
  color: #d0a82c;
}

Я без понятия кто делает такую упоротую верстку, ставя дивайдеры в одном врапере с элементом. Могу только предложить обернуть текст навигации в еще один спан.

Еще лучше вообще из ссылки убрать этот елемент и добавить афтером

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

Кароче примерно как-то так

https://codepen.io/Azperin/pen/WaWjyK

Comments

[karpos]

не помогло , да и если задуматься то и не могло помочь у тега span нет границы

[Алексей]

karpos, надо просто убить верстальщика, который это делал и все. Обновил ответ

[karpos]

Алексей, посоветуй курсы вот честно я буду тебя благодарить , верстал не я я переделываю кое что но человек который верстал я его знаю. Будем расти!

[Алексей]

karpos, да тут не курсы нужны, а просто изучить возможности css из документации и правильно их применять.

[karpos]

да еще хотел сказать , наверное все поняли что как бы это bootstrap и тут нету не одного кастомного класса,
единственное может я пошел не тем путем до меня в тег ul человек добавил свой классы я ушел от этого так как решил переписать существующие но я особо то ничего не трогал background убрал border вокруг всего меню и добавил border-bottom.

Answer 2

[Алекс]

.navbar-default .navbar-nav>li:hover>a {border-bottom: 0;}