CSS add line before and after the image

Question

I have an image like so:

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

What I am looking to do is to add a line before and after the image, with the image being centred.

Like so:

------------------- Image ---------------------

I am having trouble understanding the whole :before and :after thing. My question is how do I add a line before and after the image.

Nenad Vracar · Accepted Answer · 2016-03-24T15:42:44.623

5

You can do this with Flexbox. You can vertically center img and lines with align-items: center also with flex: 1 :before and :after will take remaining width.

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>

edited Mar 24 '16 at 15:42

answered Mar 24 '16 at 15:25

Nenad Vracar

118,580
15
151
176

score 1 · Answer 2 · answered Mar 24 '16 at 15:39

You can set the line on a pseudo element, and adjust the positions as needed.

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>

CSS add line before and after the image

2 Answers2