如何在图标周围绘制水平线？

Question

我正在尝试使用以下代码在图标的ech侧绘制两条实心水平线。但是，当我将li标记显示为inline-block时，这些行会消失。

.icon-wrapper {
  display: table;
  left: 50%;
  top: 50%;
  margin: -13px 0 0 -13px;
  height: 26px;
  width: 26px;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 50%;
  background-clip: padding-box;
  text-align: center;
}
.center-icon ul li {
  list-style: none;
  display: inline-block;
}
.center-icon ul li hr {
  border: 0;
  border-top: 2px solid #8c8c8c;
  text-align: center;
  width: 45%;
}

<div class="center-icon">
  <ul>
    <li>
      <hr>
    </li>
    <li><span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </li>
    <li>
      <hr>
    </li>
  </ul>
</div>

Answer 1

您可以使用伪元素执行此操作。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  padding: 1em;
}

.iconwrapper {
  text-align: center;
  display: inline-block;
}
.iconwrapper::before,
.iconwrapper::after {
  content: '';
  display: inline-block;
  width: 2em;
  height: 1px;
  background: black;
  vertical-align: middle;
}

.fa {
 border:1px solid black;

  padding: .25em;
  border-radius:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="iconwrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>

Answer 2

最好删除<hr />并提供borders：

＆＃13;

＆＃13;

.icon-wrapper {
  display: inline-block;
  height: 26px;
  width: 26px;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 50%;
  background-clip: padding-box;
  text-align: center;
  margin: -14px auto 0;
  vertical-align: middle;
}
.center-icon ul li {
  list-style: none;
  display: inline-block;
  border: 1px solid #8c8c8c;
  border-width: 1px 0 0;
  width: 75px;
  height: 0px;
  line-height: 0px;
  text-align: center;
}

＆＃13;

Vertical
<div class="center-icon">
  <ul>
    <li>
      <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </li>
  </ul>
  <ul>
    <li>
      <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </li>
  </ul>
</div>

Horizontal
<div class="center-icon">
  <ul>
    <li>
      <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </li>
    <li>
      <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

预览