CODEWITHSUNDEEP
htmlcss
André Gonçalves
André Gonçalves

Reputation: 51

CSS makes text dissapears when I put white color on it

.role-card-group {
    display: flex;
    justify-content: space-evenly;
}

.role-card {
    height: 200px;
    width: 12%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.role-card p {
    color: #fff;
    text-decoration: none;
}

.role-card::before {
    content: '';
    background-color: #007BC7;
    height: 200px;
    width: 100%;
    opacity: 0.7;
    position: absolute;
}
<div class="role-card-group">
    <a href="" class="role-card">
        <p>Cliente</p>
    </a>
    <a href="" class="role-card">
        <p>Corretor</p>
    </a>
    <a href="" class="role-card">
        <p>Parceiro</p>
    </a>
</div>

For some reason I think that the before pseudo class is applying opacity on the text and I need the text white inside the card.

Upvotes: 2

Views: 82

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

The ::before psuedoelement is overlapping the paragraph, since it's in position: absolute

Change the stack order by adding z-index: -1 to .role-card::before

.role-card-group {
    display: flex;
    justify-content: space-evenly;
}

.role-card {
    height: 200px;
    width: 12%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.role-card p {
    color: #fff;
    text-decoration: none;
}

.role-card::before {
    content: '';
    background-color: #007BC7;
    height: 200px;
    width: 100%;
    opacity: 0.7;
    position: absolute;
    z-index: -1;
}
<div class="role-card-group">
    <a href="" class="role-card">
        <p>Cliente</p>
    </a>
    <a href="" class="role-card">
        <p>Corretor</p>
    </a>
    <a href="" class="role-card">
        <p>Parceiro</p>
    </a>
</div>

Optionally, if you cannot assign a negative z-index to the pseudoelement, you could assign instead a z-index to the paragraph (along with a non-static position, e.g. position: relative)

.role-card-group {
    display: flex;
    justify-content: space-evenly;
}

.role-card {
    height: 200px;
    width: 12%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.role-card p {
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.role-card::before {
    content: '';
    background-color: #007BC7;
    height: 200px;
    width: 100%;
    opacity: 0.7;
    position: absolute;
   
}
<div class="role-card-group">
    <a href="" class="role-card">
        <p>Cliente</p>
    </a>
    <a href="" class="role-card">
        <p>Corretor</p>
    </a>
    <a href="" class="role-card">
        <p>Parceiro</p>
    </a>
</div>

Upvotes: 3

Or Ben-Yossef
Or Ben-Yossef

Reputation: 419

Add z-index: 9 to p or z-index: -1 to before element to prevent its overlapping.

.role-card-group {
    display: flex;
    justify-content: space-evenly;
}

.role-card {
    height: 200px;
    width: 12%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.role-card p {
    color: #fff;
    text-decoration: none;
    **z-index: 9;**
}

.role-card::before {
    content: '';
    background-color: #007BC7;
    height: 200px;
    width: 100%;
    opacity: 0.7;
    position: absolute;
}

Upvotes: 0

Related Questions