How to make a section of hr transparent - css

Question

I'm currently designing a website based on this bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/). I like what he's done with the hr styling (see code below), but I really want to use it against a background that isn't a plain colour, i.e. a background image.
The problem with this is that when changing the star icon background-color property to transparent (i.e. not the same colour as the background), the hr line still remains beneath.
Example image . If anyone can come up with a simple way of achieving the same effect against a non-plain background, I'd be really grateful!
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;
}

Answer 1

I don't think you can do what you're asking with a single element. I would suggest creating a div with a span inside for the icon, and then using the :before and :after pseudo elements to create two horizontal lines, either side of the star.
body {
background-color: #f00;
}
.hr {
overflow: hidden;
position: relative;
text-align: center;
}
.hr::before, .hr::after {
background-color: white;
content: '';
display: inline-block;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.hr::before {
left: calc(50% + 30px);
}
.hr::after {
right: calc(50% + 30px);
}
.hr .icon {
background-color: transparent;
color: white;
display: inline-block;
font-family: FontAwesome;
font-size: 2em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="hr">
<span class="icon fa fa-star"></span>
</div>

Answer 2

Change pseudo element :after to :before
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/bootstrap/css/bootstrap.min.css" type="text/css"/>
<link href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: #2C3E50 solid 5px;
color: #2C3E50
}
hr.star-primary:before {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 .25em;
content: '\f005';
color: #2C3E50
}
</style>
<hr class="star-primary" />
Sample Output
Hope this helps!