响应性徽标css

我的CSS中有以下内容，以便在我的徽标的每一面运行一个好看的规则：

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

我的问题是，我试图使标志在某种程度上响应，但不能在这个CSS的目标图像

在我的header.php文件中，我有以下内容：

<!-- 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

无法定位实际的logo图像

---

非常感谢您的建议。哈尼

好的，我已经满意地解决了这个问题。我为手机徽标添加了另一个div，设置为在正常模式下不显示。徽标根据与徽标宽度相适应的媒体呼叫自行切换：

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

---

好的，我已经满意地解决了这个问题。我为手机徽标添加了另一个div，设置为在正常模式下不显示。徽标根据与徽标宽度相适应的媒体呼叫自行切换：

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

---

为什么使用

hr

显示图像？！为什么使用

hr

显示图像？！