Draw Line in the middle of the line

Question

I was wondering how can I implement this image with CSS(3) (and if necessary with javascript).

Any ideas?

Answer 1

There are numerous ways of doing this- but since your lines are more than 1 pixel in height and has rounded ends on both ends of both lines - I would di it as ::before and ::after pseudo-elements with the centered text.

Note that when positioning elements with position:absolute - you will need to apply position: relative to a parent element. Aslo - you will need to offset the line pseudoelements by half their height - in order to vertically center them.

.wrapper {
 text-align: center;
 position: relative;
}

span {
  display: inline-block;
  width: 10%;
  font-size: 20px;
  font-weight: bold
}

.wrapper::before,
.wrapper::after {
  content: ' ';
  display: block;
  position: absolute;
  top: calc(50% - 3px);
  width: 45%;
  background: black;
  border-radius: 6px;
  height: 6px;
}

.wrapper::after {
 right: 0;
}

<div class="wrapper">
  <span>Hi!</span>
</div>