Apply dark_filter to add foreground dark alpha with size of under element

dark filter css size under element

​#dark_filter {
    border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#dark_filter:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0,0,0, 0.5); /*partially transparent image*/
    pointer-events: none;
}

html

    <a href="manual">
      <div id="dark_filter">
        <button type="button" id="btn-ldr">
          <br/><br/><br/><br/>
          <h1 style="background: rgba(0, 0, 0, 0.4);">Livre de règles</h1>
          <div style="background: rgba(0, 0, 0, 0.7)">Règles, habilités et rituels.</div>
        </button>
      </div>
    </a>