Responsive lines on each side of circle using psuedo elements

Question

I want to create responsive stripe before/after object using CSS.
Here is desired result :

Left stripe should start from the left corner of viewport and go up to circle object, maybe below it, but not any further.

Right stripe should start from right corner or end of circle and go to the end relatively.

I have tried different ways, but cannot get it working, I cannot specify width of lines in pixels, because I need them to scale according to the screen size.

https://jsfiddle.net/krLdw2kj/3/

Check the code snippet here as well.

.circle-image {
  height: 100px;
  width: 100px;
}
.row-wrapp {
  position: relative;
}
.wrapper--left {
  position: relative;
  text-align: left;
  padding-left: 20%;
}
.wrapper--right {
  position: relative;
  text-align: right;
}
.wrapper--left::before {
  content: "";
  width: 30%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50px;
  color: #000;
  background-color: #000;
}
.wrapper--right::after {
  content: "";
  width: 50%;
  height: 1px;
  position: absolute;
  right: 0;
  top: 50px;
  color: #000;
  background-color: #000;
}

<div class="container-fluid">
  <div class="row row-wrapp">
    <div class="col-sm-6 wrapper--left">
      <img src="http://i.imgur.com/ZrMo4RT.png" class="circle-image" />
    </div>
    <div class="col-sm-6 wrapper--right">
      <img src="http://i.imgur.com/ZrMo4RT.png" class="circle-image" />
    </div>
  </div>
</div>

I tried to play with different values but the problem is that this circles will be align left and right relatively. In case of center alignment it would be possible to set width of stripe to 50 and that's it.

you have to more clear your need – Omar Sep 08 '16 at 04:34 — Omar, Sep 08 '16 at 04:34

score 2 · Accepted Answer · edited May 23 '17 at 10:33

You can make a line on each side of the circles using approach of Line before and after title over image. Here is an example :

.wrap{
  text-align:center;
  overflow:hidden;
}
.wrap::before, .wrap::after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 -100px 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
.wrap::after {
  margin: 0 -55% 0 -100px;
}
.wrap img{
  width:100px; height:100px;
  vertical-align: middle;
  position:relative;
  z-index:1;
  margin:0 50px;
}

<div class="wrap">
  <img src="http://i.imgur.com/ZrMo4RT.png"/>
  <img src="http://i.imgur.com/ZrMo4RT.png"/>
</div>

score 1 · Answer 2 · answered Sep 08 '16 at 05:13

1

Here’s one way you could do that https://jsbin.com/tavihu/edit?html,css,output

You could also use flexbox instead of floats. Really depends on what exactly you’re trying to do.

answered Sep 08 '16 at 05:13

Ted Whitehead

1,731
10
18

Responsive lines on each side of circle using psuedo elements

2 Answers2