Как сделать раздел hr прозрачным ⇐ CSS

[Anonymous]

В настоящее время я разрабатываю веб-сайт на основе этой темы начальной загрузки (https://blackrockdigital.github.io/star ... reelancer/). Мне нравится то, что он сделал со стилем hr (см. код ниже), но я действительно хочу использовать его на фоне, который не является однотонным, то есть фоновым изображением.


Проблема в том, что при изменении свойства фона значка звездочки на прозрачное (т. е. не тот цвет, что фон), линия hr по-прежнему остается внизу.


Пример изображения. Если кто-нибудь сможет придумать простой способ добиться того же эффекта на неоднотонном фоне, буду очень признателен!

hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: solid 5px;
border-color: #2C3E50;
}

hr.star-primary:after {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 0.25em;
content: '\f005';
color: #2C3E50;
background-color: white;
}


Подробнее здесь: https://stackoverflow.com/questions/467 ... ransparent