Светящиеся скобки псевдоэлемент 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>