How to make a section of hr transparent

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; 
}

Solution

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>