Content separator with image inside

Question

I have to implement this content separator in my web page using html/css but I cannot find the implementation.

I have the .svg and .png pictures of this flower. Can you show me the steps of doing this, or give me links to some well-explained tutorials. I appreciate any help!

have you tried anything at all for code? – mlegg May 20 '16 at 15:00 — mlegg, May 20 '16 at 15:00

score 1 · Answer 1 · edited May 23 '17 at 11:52

Flexbox and a couple of pseudo-elements make this simple.

span {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
span::before,
span::after {
  content: '';
  flex: 1;
  height: 2px;
  background: teal;
  margin: .5em;
}

<span><img src="http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg" alt="" /></span>

Related Question

G-Cyrillus · Answer 2 · 2016-05-20T15:33:16.237

1

A typical HR revisited.

You can use a pseudo to introduce an image on top of it:

hr {
  position:relative;
  margin:2em 1em;
  color:lighgray;
  }
hr:before {
  content:url(http://i1253.photobucket.com/albums/hh600/fleur-de-lis-xxx/favicon-bright.png);
  position:absolute ;
  text-align:center;
  left:50%;
 background:white;
  z-index:1;
  height:2em;
  width:30px;
  margin:-15px;
  
  }

<hr/>

edited May 20 '16 at 15:33

answered May 20 '16 at 15:27

G-Cyrillus

101,410
14
105
129

score 1 · Answer 3 · answered May 20 '16 at 15:28

Here's a solution with pseudo element :after

.separator { border-bottom: 1px solid #333; position: relative; margin-top: 30px; }
.separator:after {
  content: ""; 
  position: absolute; 
  left: 50%; 
  margin-left: -25px; /* half of the image width */
  top: -20px; 
  background: url('http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg') no-repeat #fff;
  width: 50px;
  height: 50px;
}

<div class="separator"></div>

Content separator with image inside

3 Answers3