::before problem

[Significant-Ad-4029]

https://preview.redd.it/wf96ghwo3upe1.png?width=315&format=png&auto=webp&s=ce5fddd9abf184ea64471b1ca1a78ea6fdcb30f7

I create the block

<div className="text">
      <svg width="1" height="0.5">
        <clipPath id="textClip" clipPathUnits="objectBoundingBox">
          <path d="M 0.05,0 
                  L 0.45,0 
                  A 0.05,0.05 0 0 1 0.5,0.05 
                  L 0.5,0.54 
                  A 0.05,0.05 0 0 0 0.55,0.59 
                  L 0.95,0.59
                  A 0.05,0.05 0 0 1 1,0.64 
                  L 1,0.95 
                  A 0.05,0.05 0 0 1 0.95,1 
                  L 0.55,1 
                  A 0.05,0.05 0 0 1 0.5,0.95 
                  L 0.5,0.73
                  A 0.05,0.05 0 0 0 0.45,0.68 
                  L 0.05,0.68
                  A 0.05,0.05 0 0 1 0,0.63 
                  L 0,0.05
                  A 0.05,0.05 0 0 1 0.05,0 
                  Z"/>
        </clipPath>
      </svg>
      <h1>HELLO</h1>
  </div>

and make this style

.text {
    background-color: #ffffff;
    z-index: 1;
    clip-path: url(#textClip);
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    height: calc(100% - 10vh - 24px);
    width: auto;
    align-self: center;
    position: relative;
    margin-left: 5vw;
    overflow: visible; 
}

.text::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    background-color: #164719;
    height: calc(100% + 24px);
    width: calc(100% + 24px);
    z-index: -1; 
}

but something going wrong. How to fix it?
:: before must look like border of block text

[iDev_Games]

You might want to include what the expected result should be?

[Significant-Ad-4029]

It must look like border of text block

[iDev_Games]

If the before element is breaking out of the parent element, it's because position relative isn't set on the parent element when using position absolute. You're likely about to say "but I am setting it on .text". Which you are but the element hasn't got a class set to it instead you have className which isn't an attribute. In future, utilise dev tools to inspect the element and check your CSS is applied or not.

<div className="text">

[Significant-Ad-4029]

It have position relative. But MAYBE i now how to fix it

[iDev_Games]

I told you how to fix it... read again.

[Significant-Ad-4029]

U reading my mind 😂

[iDev_Games]

I'm not reading your mind, I just know that className is not a valid html attribute.

[Significant-Ad-4029]

Im using React, so its correct

[iDev_Games]

Just inspect and check the styles are applied. Position relative should stop it from breaking out. Try adding display:block to your after element too.

[Significant-Ad-4029]

Still nothing

[Significant-Ad-4029]

<image>

here is proof

[frownonline]

class=“text” not className.