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)
enter image description here

= : 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!

1) What have you tried? 2) If you upload the imgur and post the link, we can embed it in your question. — Mooseman, Feb 14 '15 at 19:34
I really haven't tried anything yet.. I first had a color as background so i simply gave the name the same color as background — user3708994, Feb 14 '15 at 19:36
StackOverflow is not a 'do my homework for me' kind of website. its a website where developers turn to for help if they get stuck coding something and need assistance. please show some effort on your side, and try to code it yourself first. then, if you get stuck we will be happy to assist — Banana, Feb 14 '15 at 19:38
I don't usually post anything on StackOverflow but right now i don't know where to start — user3708994, Feb 14 '15 at 19:41

score 1 · Accepted Answer · answered Feb 14 '15 at 19:43

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>

posit labs · Answer 2 · 2015-02-14T19:56:15.007

0

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>

edited Feb 14 '15 at 19:56

answered Feb 14 '15 at 19:47

posit labs

8,951
4
36
66

score -1 · Answer 3 · answered Feb 14 '15 at 19:38

-1

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

answered Feb 14 '15 at 19:38

Pethő Jonatán

308
4
11

CSS Mask a line

3 Answers3