CSS Mask a line

Question

Okay, i am not allowed to upload an image yet, so i will try to explain it this way:

I am trying to create this effect:

(update: text replaced with an image)

= : background div with background-image

the dashed line has a width of 100% and does not cross the name.

I don't want the line to go over the name, so i am looking for some kind of mask that i can place over the line.

Thanks in advance!

Answer 1

You could add the line with ::before and ::after pseudo-elements, styled with a border:

#wrapper {
  display: flex;
  border: 3px double;
  /* You can add a backgound here */
}
#wrapper::before, #wrapper::after {
  content: '';
  flex-grow: 1;
  border-top: 1px dashed;
  align-self: center;
}

<div id="wrapper">
  <div>Peter</div>
</div>

Answer 2

You can do this with flexbox.

Here is an example on codepen

.wrapper {
  width: 400px;
  display: flex;
  flex-direction: row;
  background: lightgray;
}

.wrapper div {
  flex-grow: 1;
}

.line {
  height: 1px;
  background: black;
  flex-grow: 1;
  position: relative;
  top: 7px;
}

<div class="wrapper">
  <div class="line"></div>
  <span>hello</span>
  <div class="line"></div>
</div>

Answer 3

Try z-index in the css. Let the upper layer get the larger number.