Нужны границы вокруг крошки - PullRequest
Новая
       8

Нужны границы вокруг крошки

0 голосов
/ 14 ноября 2018

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

Как я могу добавить границы на хлебную крошку? Также, пожалуйста, дайте мне знать, можно ли упростить существующий CSS, чтобы он выглядел одинаково.

Статический HTML должен быть таким же.

Вот изображение того, что ожидается при наведении.

enter image description here

Вот код: 

* {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-weight: 100;
  font-size: 32px;
  padding: 40px;
  color: #fff;
}

#breadcrumb {
  list-style: none;
  display: flex;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb a {
  width: 13.33%;
  justify-content: flex-start;
  text-decoration: none;
}
#breadcrumb a span {
  color: #a9a9a9;
  display: block;
  background: #D3D3D3;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 15px 40px 15px 25px;
  text-align: center;
  margin-right: 23px;
}
#breadcrumb a:first-child span {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb a:first-child span:before {
  border: none;
}
#breadcrumb a:last-child {
  width: 20%;
  border: none;
  justify-content: flex-end;
} 
#breadcrumb a:last-child span {
  padding-right: 15px;
  border-radius: 0 4px 4px 0;
}

#breadcrumb a:last-child span:after {
  border: none;
} 

#breadcrumb a span:before, #breadcrumb a span:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #D3D3D3;
  border-width: 35px 15px;
  width: 0;
  height: 0;
}
#breadcrumb a span:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb a span:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #D3D3D3;
}

#breadcrumb a:hover {
  margin: 0 3px;
}
<div id="breadcrumb">
   <a href="#"><span>1</span></a>
   <a href="#"><span>2</span></a>
   <a href="#"><span>3</span></a>
</div>
...