Свечение от элемента на бордере

Question

Есть хеадер, у которого есть border-bottom. В хеадере есть элементы, которые могут испускать свечение. Свечение это помимо того, что в виде размытой фигуры на заднем фоне за элементом (на картинке отсутствует), они должны до кучи ещё светится у бордера хеадера. Да не по обычному, а градиентом.

Я пробовал элементом after просто полоску с background gradient выдать, но проблема в том, что этих элементов на странице много, и они разной высоты, от чего их надо попиксельно выравнивать, а это как будто костыль страшный.

Answer 1

Сделал тень и закрыл лишнее блоками. Наверное это ещё больший костыль, но как идея..

body {
  margin: 0;
}

.wrapper {
  background: #222;
  height: 100vh;
  padding: 5px;
}

.menu {
  background: black;
  display: flex;
}

.menuitem {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #777;

  font-size: 20pt;
  width: 5em;
  height: 2em;
  text-align: center;
  vertical-align: center;

}

span {
  position: relative;
  font-weight: 900;
  color: #707070;

}

span:hover {
  color: #00ff00;
  text-shadow:
    0px 50px 10px #80FF80,
    -15px 50px 20px #70FF70,
    15px 50px 20px #70FF70,
    -35px 50px 30px #70FF70,
    35px 50px 30px #70FF70;

  z-index: 1;
}

.line1 {
  position: relative;
  background: black;
  width: 100%;
  height: 18px;
  margin: 0;
  z-index: 2;
}

.line2 {
  position: relative;
  background: black;
  width: 100%;
  height: 150px;
  margin: 3px 0;
  z-index: 2;
}

<div class=wrapper>
  <div class=menu>
    <div class=menuitem><span>File</span></div>
    <div class=menuitem><span>Edit</span></div>
    <div class=menuitem><span>Help</span></div>
  </div>
  <div class=line1></div>
  <div class=line2></div>


</div>

БЛОГ НА HUSL

Свечение от элемента на бордере

Ответы (1 шт):