title: Pseudo elements not working on Bootstrap Modal
body: <p>I try this table with this style on Bootstrap Modal, and it does not work to highlight the column and row.
  If i use it inside html file body it works. Can anyone help me with some hint what is problem?</p>
  
  <p>Style.css</p>
  
  <pre><code>.custom-table-matrix-table {
      border: solid 1px #DDEEEE;
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  .custom-table-matrix-table thead th {
      font-size: 12px;
      background: #000000;
      color: #ffffff;
      text-align: center;
  }
  .custom-table-matrix-table tbody td {
      border: solid 1px #DDEEEE;
      color: #ffffff;
      padding: 10px;
  }
  
  
  .custom-table-matrix-highlight {
      overflow: hidden;
      z-index: 1;
  }
  .custom-table-matrix-highlight tbody td, .custom-table-matrix-highlight thead th {
      position: relative;
  }
  .custom-table-matrix-highlight tbody td:hover::before {
      background-color: #CCE7E7!important;
      content:'\00a0'!important;
      height: 100%!important;
      left: -5000px!important;
      position: absolute!important;
      top: 0!important;
      width: 10000px!important;
      z-index: -1!important;
  }
  .custom-table-matrix-highlight tbody td:hover::after {
      background-color: #CCE7E7!important;
      content:'\00a0'!important;
      height: 10000px!important;
      left: 0!important;
      position: absolute!important;
      top: -5000px!important;
      width: 100%!important;
      z-index: -1!important;
  }
  </code></pre>
  
  <p>Modal code part</p>
  
  <p>
      </p>
  
  <pre><code>  &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Some text in the modal.&lt;/p&gt;
        &lt;table class="custom-table-matrix-highlight custom-table-matrix-table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Week1&lt;/th&gt;
              &lt;th&gt;Week1&lt;/th&gt;
              &lt;th&gt;Week1&lt;/th&gt;
              &lt;th&gt;Week1&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;td&gt;25.00$&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>