<div class="rating">
  <div class="rating__star" title="order in DOM: 1">⭐</div>
  <div class="rating__star" title="order in DOM: 2">⭐</div>
  <div class="rating__star" title="order in DOM: 3">⭐</div>
  <div class="rating__star" title="order in DOM: 4">⭐</div>
  <div class="rating__star" title="order in DOM: 5">⭐</div>
</div>
body {
  background-color: rgb(58, 58, 58);
}

.rating {
  --transition-duration: .75s;
  display: flex;
  font-size: 2rem;
  flex-direction: row-reverse;
  justify-content: flex-end;
  
  &__star {
    position: relative;
    padding: 5px;
    opacity: .1;
    transition: opacity var(--transition-duration);

    &:hover,
    &:hover~& {
      opacity: 1;
      transition: opacity var(--transition-duration);
      cursor: pointer;
    }
  }  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.