stop svg from overriding div height-CodePudding

I have a div with a pseudo:before, and this has a svg as content. But the svg is longer then the div and it keeps going the full length. How do I stop this from happening?

   body {
      background: #333333;
    }
    
    .pseudo--code {
      height: 300px;
      max-height: 300px;
      padding-left: 20px;
    }
    .pseudo--code:before {
      position: absolute;
      content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
      width: 10em;
      left: 10px;
      overflow-x: hidden;
      overflow-y: hidden;
      opacity; 0.1;
      max-width: 100%;
      max-height: 100%;
    }
    
    .pseudo--code:after, .pseudo-code:before {
      content: "";
      position: absolute;
      bottom: 0;
      top: 0;
    }

<div>
      <h1> This is a heading</h1>
      <div >
        <h> this is a second heading</h>
      </div>
      <h2>this is also a heading</h>
    </div>

Also made a codepen https://codepen.io/Loskwantos/pen/NWYPvvy

CodePudding user response：

Add overflow: hidden to the pseudo--code class. And remove position: absolute from pseudo--code:before.

body {
  background: #333333;
}

.pseudo--code {
  height: 300px;
  max-height: 300px;
  padding-left: 20px;
  overflow: hidden;
}
.pseudo--code:before {
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  width: 10em;
  left: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity; 0.1;
  max-width: 100%;
  max-height: 100%;
}

.pseudo--code:after, .pseudo-code:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
}

<div>
  <h1> This is a heading</h1>
  <div >
    <h> this is a second heading</h>
  </div>
  <h2>this is also a heading</h>
</div>

CodePudding user response：

Add height to your .pseudo--code:before and it will solve your problem. Overflow works if your element have fixed size

body {
  background: #333333;
}

.pseudo--code {
  height: 300px;
  max-height: 300px;
  padding-left: 20px;
}
.pseudo--code:before {
  position: absolute;
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  width: 10em;
  left: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity; 0.1;
  max-width: 100%;
  max-height: 100%;
  height:300px;
}

.pseudo--code:after, .pseudo-code:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
}

<div>
  <h1> This is a heading</h1>
  <div >
    <h> this is a second heading</h>
  </div>
  <h2>this is also a heading</h>
</div>