Роман Татаринов

Можно. Например я такое часто использую, если в адаптивной верстке мне необходимо на ссылку меню справа повесить span, при нажатии на который будет отменено свойства перехода по ссылке и произойдет выпадение подменю. Но делаю я такое исключительно при адаптиве, причем span помещаю скриптом тоже. Делаю это вот таким образом:

//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню
	$('.left-menu__list .left-menu__item').append( function(indx, val){
		if($(this).find('.left-menu__list').length != 0)
		 return '<span class="arrow">&rsaquo;</span>';
		else
		 return '';
	});
//Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню"
//Раскрытие меню при нажатии на "стрелку"
	$('.arrow').click(function(){
		$(this).toggleClass('arrow-switch');
		$(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open');
	});
//Окончание секции "Раскрытие меню при нажатии на "стрелку"

Нужным классам прописываю нужные стили.

.left-menu__list {
    max-height: 0;
    -webkit-transition: 800ms ease all;
    transition: 800ms ease all;
}
.left-menu__list--open {
    max-height: 320px;
    -webkit-transition: 800ms ease all;
    transition: 800ms ease all;
}

Так я получаю плавное выпадение списка подменю внутри меню, если такой существует.

немного в другое, это в какое?
Вы можете к примеру добавить padding-bottom: 10px, следовательно border будет ниже на 10px