Responsive logo css

Question

I have the following in my CSS in order to run a nice looking rule each side of my logo:

hr.stylelogo {
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    box-sizing: content-box;
    margin-bottom: 1.5em;
}
hr.stylelogo:after {
    content: url(http://the_image);
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #ffffff;
    color: #8c8b8b;
    font-size: 16px; }

The problem I have is I am trying to make the logo responsive in some way but can't target the image inside this CSS.

In my header.php file I have the following:

<!-- LOGO BLOCK STARTS HERE -->
  <div id="logo">
<div align="center"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><hr class="stylelogo"></a><br />
</div><!-- end #logo -->
  </div>
<!-- LOGO BLOCK ENDS HERE --><br />

#logo doesn't work in targeting the actual logo image.

Any suggestions much appreciated. HNY!

Answer 1

OK, so I have solved this to my satisfaction. I added another div for a mobile logo which I set not to display whilst in normal mode. The logos switch themselves out according to a media call appropriate to the width of the logo :

@media all and (max-width: 32.5em) {
#logo {display: none; }
#mobilelogo{display:block;}
}