Sass 不显示内容：“”与悬停一起使用时

Question

我正在使用以下 css 和 sass：

    .cell:hover, .cell.x {
    &::after, &::before {
        position: absolute;
        content: '';
        width: 2rem;
        height: 12rem;
    }
    &::after {
        transform: rotate(45deg);
    }
    &::before {
        transform: rotate(-45deg);
    }
}

此代码生成一个 X 字母。当我将 class ".x" 放在任何 .cell 中时，它都能完美运行并在我的 div.

上显示 X 字母

但是如果我将鼠标放在单元格上不显示内容，只有当我在属性中放置一些内容时才显示：content: '.';

有谁知道为什么在使用 Sass 触发悬停时不显示空白内容？

HTML

<body>
    <section class="board x">
        <div id="0" class="cell x"></div>
        <div id="1" class="cell"></div>
        <div id="2" class="cell"></div>
        <div id="3" class="cell"></div>
        <div id="4" class="cell"></div>
        <div id="5" class="cell"></div>
        <div id="6" class="cell"></div>
        <div id="7" class="cell"></div>
        <div id="8" class="cell"></div>
      </section>
</body>

Sass

body {
    height: 100vh;
    width: 100vw;
    background: blueviolet;
}
.board {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
}
.cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12rem;
    height: 12rem;
    width: 12rem;
    border: .6rem solid white;
    cursor: pointer;
    &:nth-child(-n + 9) {
        border-top: none;
        border-left: none;
    }
    &:nth-child(n + 7) {
        border-bottom: none;
    }
    &:nth-child(n + 7) {
        border-bottom: none;
    }
    &:nth-child(3n +3) {
        border-right: none;
    }
}
.cell.x {
    cursor: not-allowed;
    &::after, &::before {
        background-color: white;
    }
}
.board.x {
    .cell:not(.x):hover, .cell.x {
        &::after, &::before {
            position: absolute;
            content: '';
            width: calc(12rem * 0.2);
            height: 12rem;
        }
        &::after {
            transform: rotate(45deg);
        }
        &::before {
            transform: rotate(-45deg);
        }
    }
}

Answer 1

问题在于缺少 background-color。您将其设置为 .cell.x，但不要将其设置为悬停状态。所以 X 在那里，只是看不见。

.cell:hover, .cell.x {
    &::after, &::before {
        position: absolute;
        content: '';
        width: 2rem;
        height: 12rem;
        background-color: white; // <-- this thing
    }
    &::after {
        transform: rotate(45deg);
    }
    &::before {
        transform: rotate(-45deg);
    }
}

Sass 不显示内容：“”与悬停一起使用时

Sass not show content: "" when used with hover

css

sass