Почему функция, используемая :: before, не отображается?

Question

Я намеревался создать нижнюю строку для nav>a на ::before, и эта строка должна отображаться при наведении курсора мыши.

Но проблема в том, что эта строка никогда не появляется. Я попробовал код для другого тега <a> за пределами <header>, и он работает. Не знаю, почему внутри просто не работает <header>.

Заранее благодарю за вашу помощь!

.container {
  display: -webkit-flex;
  /* For support in a series of Webkit browsers */
  display: -ms-flex;
  /* For support in IE 10 */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}

.container-item {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  padding: 1rem;
}

.container-item-2 {
  -webkit-flex: 2 1 0;
  -ms-flex: 2 1 0;
  flex: 2 1 0;
  padding: 1rem;
}


/* I'm thinking if the problem is due to the code below. */

header {
  z-index: 10;
  background-color: white;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  width: 80%;
  margin: 0 10% 8% 10%;
  padding: 0 5%;
  box-shadow: 0 0.5em 0.8em #e5e5e5;
  border-radius: 0 0 1rem 1rem;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

nav>a {
  padding: 0.5rem .25rem;
  margin: 1rem 0.75rem;
  letter-spacing: 0.08rem;
  position: relative;
}

nav>a::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  color: #D04925;
  height: 0.25em;
  width: 0;
}

nav>a:hover::before {
  width: 100%;
}

<header class="container">
  <h1 class="container-item"><a href="#">DAN PENG</a></h1>
  <nav class="container-item-2">
    <a href="#style-guide">Style Guide</a>
    <a href="#wireframes">Wireframes</a>
    <a href="#bio">Bio</a>
    <a href="#projects">Project Analysis</a>
  </nav>
</header>

Answer 1

Это то, что вы ищете? Я добавил нижнюю границу при наведении.

.container {
  display: -webkit-flex;
  /* For support in a series of Webkit browsers */
  display: -ms-flex;
  /* For support in IE 10 */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}

.container-item {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  padding: 1rem;
}

.container-item-2 {
  -webkit-flex: 2 1 0;
  -ms-flex: 2 1 0;
  flex: 2 1 0;
  padding: 1rem;
}


/* I'm thinking if the problem is due to the code below. */

header {
  z-index: 10;
  background-color: white;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  width: 80%;
  margin: 0 10% 8% 10%;
  padding: 0 5%;
  box-shadow: 0 0.5em 0.8em #e5e5e5;
  border-radius: 0 0 1rem 1rem;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

a:visited { text-decoration: none; color:red; }

nav a {
border-color: white;
border-style: hidden hidden solid hidden;
border-width:1px
}

nav a:hover {
  border-color: black;
  border-style: hidden hidden solid hidden;
  border-width: 1px;
}

<header class="container">
  <h1 class="container-item"><a href="#">DAN PENG</a></h1>
  <nav class="container-item-2">
    <a href="#style-guide">Style Guide</a>
    <a href="#wireframes">Wireframes</a>
    <a href="#bio">Bio</a>
    <a href="#projects">Project Analysis</a>
  </nav>
</header>

Answer 2

Причина, по которой это не работает, заключается в том, что вы используете color вместо background-color. color относится к тексту цвету, но ваш элемент ::before не имеет текстового содержимого.

.container {
  display: -webkit-flex;
  /* For support in a series of Webkit browsers */
  display: -ms-flex;
  /* For support in IE 10 */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}

.container-item {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  padding: 1rem;
}

.container-item-2 {
  -webkit-flex: 2 1 0;
  -ms-flex: 2 1 0;
  flex: 2 1 0;
  padding: 1rem;
}


/* I'm thinking if the problem is due to the code below. */

header {
  z-index: 10;
  background-color: white;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  width: 80%;
  margin: 0 10% 8% 10%;
  padding: 0 5%;
  box-shadow: 0 0.5em 0.8em #e5e5e5;
  border-radius: 0 0 1rem 1rem;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

nav>a {
  padding: 0.5rem .25rem;
  margin: 1rem 0.75rem;
  letter-spacing: 0.08rem;
  position: relative;
}

nav>a::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #D04925;
  height: 0.25em;
  width: 0;
}

nav>a:hover::before {
  width: 100%;
}

<header class="container">
  <h1 class="container-item"><a href="#">DAN PENG</a></h1>
  <nav class="container-item-2">
    <a href="#style-guide">Style Guide</a>
    <a href="#wireframes">Wireframes</a>
    <a href="#bio">Bio</a>
    <a href="#projects">Project Analysis</a>
  </nav>
</header>