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

Question

我尝试使用 ::after 将框阴影添加到我的 table 中的行，因为在 Internet Explorer 中 table 中的框阴影有很多错误，所以这是我的阴影显示正常时的一种解决方案。我有行中的数据，它必须是可点击的，并且应该可以 select 文本。

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: 但没有结果。

是否有任何方法可以使我的行可点击，这样我就可以 select 从它们中输入文字？？

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;
          }

    }
}

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

How to make ::before/::after element clickable in css?

html

css

pseudo-class

angular