CSS Mask Element to only where it is on top

user_9425136 0
Viewed 241

I have a webpage with a series of spaced text elements.

There is an absolutely positioned line passing through these text elements as seen below.

https://i.615283.net/u/vxDLVS.png

I need it to cut off whenever inside the text element as in the line being invisible within the grey area.

enter image description here

Now don't immediately answer with background: black; as there is a non-black background behind the line which I need to show.

Is there any way I can mask the line to not be visible at all when an element is in front of it?

My test code:

<div></div>
<p>Example textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample text</p>

p {
  text-align: center;
  margin: 45vh 0;
  z-index: 2;
  padding: 20vw;
  position: relative;
}

div {
  position: absolute;
  margin-left: calc(50vw - 1px);
  top: 0;
  width:2px;
  background: #cfc35d;
  height: 100vh;
}

NB: I do not want to use raw pixel values as this is all dynamic content.

css
3 Answers

Yes, CSS Pseudo Elements Can Do

It's pretty amazing you can do with the pseudo elements :before and :after.

Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element.

They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.

* {
    margin:0px;
}
.wrapper {
    position: fixed;
    left: 0;
    width: 0;
    width: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-size:20px;
    overflow:hidden;
}
.tagline {
    position:relative;
    width:150px;
    display:block;
    text-align:center;
}
.tagline:after, .tagline:before {
    content:'';
    width:5px;
    height:50vh;
    background:red;
    display: inherit;
    position:absolute;
    left:calc(50% - 5px)
}
.tagline:after {
    top:100%;
}
.tagline:before {
    bottom:100%;
}
<div class="wrapper">
  <div class="tagline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
</div>

enter image description here

user_60768630

You can use 'before' and 'after' pseudo-elements with some adjustments. See below :

p {
  display:flex;
  flex-direction:column;
  text-align: center;
}

p:before, p:after{
  content:'';  
  margin: auto;
  width:2px;
  background: #cfc35d;
  height: 100vh;
}
<p>Example textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample text</p>

user_140165120

you can use z-index higher at h2 tag or mix-blend-mode: overlay at line class see the snippet below for example. you can change background.

body{
  background: black;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
 h2{
    text-align: center;
    color: white;
    margin: 0;
    width: 100%;
    background: red;
    padding: 0;
  }
 .line{
    position: absolute;
    width: 10px;
    height: 100vh;
    background: blue;
    left: 50%;
    transform: translateX(-50%);
   mix-blend-mode: overlay;
  }
<h2> Hello world</h2>
<div class="line"> </div>

user_116524010
Related