[Gera Herbst]

Нет, код пишу ниже.
- Смотри, когда я навожу на span (кружок), то верхний бордер дива меняет цвет и соответственно происходит стилизация кружочка (своеобразная анимация; всплытие события).
- Когда навожу на див, то меняется только цвет верхнего бордера. А мне нужно,чтобы и анимация кружочка происходила.

Вот и думаю как затопить hover.

Можно при событии hover добавлять класс .hover к span, но это не сработает с псевдоэлементом.

А просто передать событие на другой элемент при mouseenter на диве, почему-то не срабатывает.

Может есть вообще другой подход к этой задаче...

<style>
			.heading a {
				display: block;
			    color: #853E29;
			    padding: 20px;
			}

			.heading {
			    margin-top: 6px;
			    background: #FFF;
			    border-top: 2px solid #EEE;
			    border-bottom: 2px solid #EEE;
			}

			.heading:hover {
				border-top: 2px solid #E14817;
			}

		    .heading a span {
			    display: block;
			    float: left;
			    background-color: #E14817;
			    border-radius: 50%;
			    padding: 7px 14px;
			    margin-top: -7px;
			    margin-right: 10px;
			    -webkit-transition: color 0.3s;
			    transition: color 0.3s;
			    position: relative;
			    z-index: 1;
			    -webkit-backface-visibility: hidden;
			    -moz-osx-font-smoothing: grayscale;
			}

			.heading a span:focus {
			    outline: none;
			}

			.heading a span::before {
			    content: '';
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    border-radius: inherit;
			    z-index: -1;
			    box-shadow: inset 0 0 0 35px #f9e1c4;
			    -webkit-transform: scale3d(0.9, 0.9, 1);
			    transform: scale3d(1.05, 1.05, 1);
			    -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
			    transition: box-shadow 0.3s, transform 0.3s;
			}

			.heading a span:hover {
			    color: #FFF;
			}

			.heading a span:hover::before {
			    box-shadow: inset 0 0 0 1px #E14817;
			    -webkit-transform: scale3d(1, 1, 1);
			    transform: scale3d(1, 1, 1);
			}
		</style>
           <div class="heading">
		<a role="button">
	            <span>2</span>Configure product
	        </a>
	    </div>