发光括号伪元素css

Question

我正在尝试为标题制作发光支架，有些是一行，但有些是两条线，如图片。可以选择这样做吗？它可以是直支架，不像照片那样精确。

.container {
  background-color: #000000;
  height: 100vh;
  margin: 0 auto;
  padding: 10%;
}

.bracket {
  position: relative;
  color: white;
}
.bracket:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 40px 5px #3ebcf5;
}
.bracket:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 40px 5px #3ebcf5;
}

<div class="container">
  <div>
    <h1 class="bracket">NAME</h1>
  </div>
</div>

Answer 1

您的解决方案（在评论中）几乎是正确的。在这里，我修复了一些填充：http://codepen.io/anon/pen/qNvyab

我的解决方案

我使用了一个方框而不是你要求的“[]”字符，因为你无法根据容器高度来缩放字符。

h1 {
  position: relative;
  padding: 0 1em;
  display: inline-block;
  color: blue;
}
h1::before, h1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0px;
  height: 100%;
  border: 5px solid white;
  box-shadow: 0 0 30px blue, 0 0 5px blue, 0 0 5px blue;
  background: blue;
}

h1::before {
  left: 0;
  border-right-color: transparent;
}
h1::after {
  right: 0;
  border-left-color: transparent;
}

<h1>glowing in<br>the dark</h1>

<br>

<h1>like a neon light</h1>