ton1_rose

В данном случае в качестве селектора является переменная $container-selector: h1;
Попробуйте задать вместо переменной непосредственно селектор h1 следующим образом:

$bg-color: white;
$bracket-color: orange;
$bracket-width: 10px;
$bracket-length: 30px;
// just reset
body {
  background-color: $bg-color;
}

// not really related
h1 {
  padding: 0 30px;
}

h1 {
  position: relative;
  border: $bracket-width solid $bracket-color;
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: -$bracket-width;
    right: $bracket-length - $bracket-width;
    left: $bracket-length - $bracket-width;
    height: $bracket-width;
    background-color: $bg-color;
  }
  &:after {
    top: initial;
    bottom: -$bracket-width;
  }
}

В hblock создал еще 1 див которому задал стилевые параметры фона с z index , hblock задал позишн релэйтив и относительно него отцентрировал icons_line.
Ольга спасибо, но я додумал этот метод чуть раньше :)

всем спасибо за ответы! еще интересует только как для того фона задана фактура прозрачная?
если смотреть в коде то там снизу просто размазаная картинка а поверх фактура пиксельная, хотелось бы узнать как она реализована?)
и как вообще структура в html будет отражена ?

всем спасибо за ответы!

.imaaage:hover~.text{
color: red;
}

помог без проблем, а вот с реализацией обертки не получилось =( думаю структуру если переделать мб заработает .. ну а пока и так сойдет )