CODEWITHSUNDEEP
csssass
Diego Souza
Diego Souza

Reputation: 23

Sass not show content: "" when used with hover

I'm using the following css with sass:

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

This code generate a X letter. When I put the class ".x" in any .cell it works perfectly and show the X letter on my div.

But if I put my mouse over the cell don't show the content, only if I put some content in the property: content: '.';

Does anyone know why it doesn't show blank content when hover is triggered using 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);
        }
    }
}

Upvotes: 0

Views: 28

Answers (1)

Gleb Kostyunin
Gleb Kostyunin

Reputation: 3863

The problem is with missing background-color. You set it for .cell.x, but do not set it for hover states. So the X is there, it is just invisible.

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

Upvotes: 1

Related Questions