html - 如何在 css 中使::before/::after 元素可点击？

Question

我尝试使用::after 将 box-shadow 添加到我的表中的行，因为在 Internet Explorer 中，表中的 box-shadow 有很多错误，所以这是我在阴影显示良好时的一个解决方案。我有行中的数据，它必须是可点击的，并且应该可以选择文本。

SCSS:

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
    padding: 0 2px;
    border-radius: 30px;

    &-row {
        position: relative;
        transition: all 0.2s ease;
        border: 1px solid $c-white;
        border-radius: 3px;
        background-color: $c-white;
        box-shadow: 0 1px 7px 10px red;

        &::after {
            content: '';
            position: absolute;
            display: block;
            border-radius: 3px;
            width: 100%;
            height: 48px;
            box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12);
            left: 0;
          }

    }
}

HTML:

<table mat-table [dataSource]="source">
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef class="table-header-cell"></th>
    <td mat-cell *matCellDef="let row" class="table-cell button"></td>
  </ng-container>
</table>

我尝试使用 z-index: 但没有结果。

是否有任何方法可以使我的行可点击，以便我可以从中选择文本？？

Answer 1

试试这个

CSS

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
    padding: 0 2px;
    border-radius: 30px;

    &-row {
        position: relative;
        transition: all 0.2s ease;
        border: 1px solid $c-white;
        border-radius: 3px;
        background-color: $c-white;
        box-shadow: 0 1px 7px 10px red;

        &::after {
            content: '';
            position: absolute;
            display: block;
            border-radius: 3px;
            width: 48px;
            height: 48px;
            box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12);
            left: 0;
            z-index:999;
          }

    }
}