CSS在图像前后添加行[重复]

【问题标题】：CSS add line before and after the image [duplicate]CSS在图像前后添加行[重复]
【发布时间】：2016-07-12 06:08:06
【问题描述】：

我有这样的图像：

<a href="#landing">
  <img src="button.png" style="display:block; margin-top:10px; margin:0 auto;" />
</a>

我要做的是在图像之前和之后添加一行，图像居中。

像这样：

--------------------图片---------

我无法理解整个 :before 和 :after 的事情。我的问题是如何在图像前后添加一行。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用Flexbox 执行此操作。您可以使用 align-items: center 垂直居中 img 和 lines 也可以使用 flex: 1 :before 和 :after 将占用剩余宽度。

a {
  display: flex;
  align-items: center;
}
a:before,
a:after {
  flex: 1;
  content: '';
  height: 1px;
  background: black;
}

<a href="">
  <img src="http://placehold.it/100x100">
</a>

【讨论】：

【解决方案2】：

您可以在伪元素上设置线条，并根据需要调整位置。

jsFiddle

a {
  display: block;
  text-align: center;
  position: relative;
}
a:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: green;
  z-index: -1;
}

<a href="#">
  <img src="//dummyimage.com/50">
</a>

【讨论】：