A block span does not take on the effects of a:hover. How to fix?

Question

css

There is the following code:

nav a {
  display:block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}
nav a:hover {
  color:#fff;

}
nav a span {
  width: 5px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  right:0;
  bottom: 30px;
  transform: rotate(45deg);
}

When you hover over a link, the color of the span element does not change, I saw some people still put it in the tag , but I did not fully understand how it works. Prompt how to force to adopt such span effect from a:hover.

Answer 1

you need to do this -

a:hover span {
 ...стили...
}

Answer 2

In general, your span is not a block one, but a block one, you have a link tag and, accordingly, everything that you wrote for the span will not work ..

width: 5px; не сработает 
  height: 2px; не сработает
  background-color: rgba(255, 255, 255, 0.6); сработает
  position: absolute; сработает
  right:0; сработает
  bottom: 30px; сработает 
  transform: rotate(45deg); не сработает