CODEWITHSUNDEEP
javascripthtmljquerycss
Pedro270707
Pedro270707

Reputation: 11

Line through text with shadow under the text

I would like to add a text with a line through it, like the css text-decoration: line-through. However, I also want the text and the line to have a shadow under them, but the line's shadow passes over the text: Image

Is there any way to make the line go above the text but the line's shadow go under the text? Any JavaScript and CSS can be used to accomplish this effect. I would like no jQuery, but it may also be used if necessary.

Upvotes: 1

Views: 88

Answers (1)

K i
K i

Reputation: 617

It's possible with pseudo elements and a box-shadow but wrapping text would ruin it

here's an example:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #444;
}
.shadow-text {
    font-size: 3rem;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.shadow-text::after, .shadow-text::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.1em;
}
.shadow-text::after {
    content: '';
    background-color: white;
    z-index: 1;
}
.shadow-text::before {
    content: '';
    box-shadow: 0px 11px 0px black;
    z-index: -1;
}
<div class="shadow-text">You have weird tastes</div>

Upvotes: 2

Related Questions