CSS select previous sibling

No CSS doesn't have a previous sibling selector but you can use ~ selector -

Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

From comment:

make progress and start the hover-height and then make progress_wrap overflow:hidden and shorter and make that expand on hover.

To avoid pushing other elements around, we can add some negative bottom margin at the same time.

#progress_wrap {
    position: relative;
    height: 2px;
    background: #f3f3f3;
    overflow:hidden;
    transition: all .25s ease-in;
}

#progress_wrap:hover, progress:hover + #start {
  height: 4px;
  margin-bottom:-2px;
}

progress,#start {
  height: 4px; /*This is a change from existing, not a new declaration*/
}

https://jsfiddle.net/5t90s4jk/