CSS在图像之前和之后添加线条

Question

我有一个像这样的图像：

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

我要做的是在图像前后添加一条线，图像居中。

像这样：

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

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

Answer 1

您可以使用Flexbox执行此操作。您可以使用align-items: center flex: 1与:before垂直居中 img 和行，: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>

Answer 2

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

<强> jsFiddle

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;