Why CSS Pseudo Element not Working in Image

Question

first I have tried to find answers on the stack overflow with a similar question but the results are still the same it doesn't show the image I mean.

so this is my html structure:

<div class="header__shape">
            <img src="img/rose.png" alt="rose couples" class="header__shape-img">
            <p class="header__shape-quote">
                Being someone’s first love may be great, <br>
                but to be their last is beyond perfect.
            </p>
</div>

and this is for my css along with the pseudo ::before

&-quote{
            position   : absolute;
            font-size  : $font-size-2;
            font-family: $font-secondary;
            color      : $color-font;
            line-height: 1.3;
            right      : 45rem;
            top        : 45rem;

            &::before{
                content         : "";
                background-image: url(../../img/quote.png);
                height          : 50px;
                display         : block;
                width           : 50px;

            }
        }

what i want like this but in reality nothing happen

Answer 1

Here is how I would solve it. First you need to give the parent a position: relative in order to move the p tag around in the div

And then give the pseudo-element position absolute to move it around the p tag.

.header__shape {
    position: relative;
}

.header__shape-quote {
    line-height: 1.3;
    font-size: 3rem;
    color: red;
    position: absolute;
    right: 30rem;
    top: 40rem;

}

.header__shape-quote::before {
    font-size: 4rem;
    position: absolute;
    top: -50px;
    left: -60px;
    /* must have for fontawesome */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f10e";
}

and in a different way. And I personally recommend this one. Over the absolute in the above example. But I don't know which is better for you. So I added both

 .header__shape { position: relative; } .header__shape-quote { line-height: 1.3; font-size: 3rem; color: red; margin-left: 5rem; margin-top: 5rem; position: relative; } .header__shape-quote::before { font-size: 4rem; position: absolute; top: -50px; left: -60px; /* must have for fontawesome */ display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\\f10e"; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <div class="header__shape"> <img src="https://picsum.photos/600" rose couples class="header__shape-img"> <p class="header__shape-quote"> Being someone's first love may be great, <br> but to be their last is beyond perfect. </p> </div>

Edit

To use your assets is just normal. Just add the path in the URL and give it height and width and you should be good to go.

 .header__shape { position: relative; } .header__shape-quote { line-height: 1.3; font-size: 3rem; color: red; margin-left: 5rem; margin-top: 5rem; position: relative; } .header__shape-quote::before { font-size: 4rem; position: absolute; top: -50px; left: -60px; /* must have for fontawesome */ display: inline-block; /* content: url('../images/caret-down-solid.svg'); */ content: url("https://picsum.photos/40"); }

 <div class="header__shape"> <img src="https://picsum.photos/600" rose couples class="header__shape-img"> <p class="header__shape-quote"> Being someone's first love may be great, <br> but to be their last is beyond perfect. </p> </div>

You can also add it as a background-image instead of adding the URL in the content . that's totally fine.

 .header__shape { position: relative; } .header__shape-quote { line-height: 1.3; font-size: 3rem; color: red; margin-left: 5rem; margin-top: 5rem; position: relative; } .header__shape-quote::before { font-size: 4rem; position: absolute; top: -50px; left: -60px; /* must have for fontawesome */ display: inline-block; content: ""; height: 40px; width: 40px; /* background: url('../images/caret-down-solid.svg') no-repeat; that works fine i'm just using external link */ background: url('https://picsum.photos/40') no-repeat; }

 <div class="header__shape"> <img src="https://picsum.photos/600" rose couples class="header__shape-img"> <p class="header__shape-quote"> Being someone's first love may be great, <br> but to be their last is beyond perfect. </p> </div>

Feel free to pick the way that suits you the most.

That doesn't help? please let me know. and I will try my best to help out.

Answer 2

you can try by adding <q> tag so if you want to add CSS for <q> tag, you can add your CSS class

<div class="header__shape">
            <img src="pic_trulli.jpg" alt="rose couples" class="header__shape-img">
            <p><q>
                Being someone’s first love may be great, <br>
                but to be their last is beyond perfect.</q>
            </p>
</div>

Answer 3

Add float, background-size properties to the pseudo-element's styles as below:

&-quote {
        position   : absolute;
        font-size  : $font-size-2;
        font-family: $font-secondary;
        color      : $color-font;
        line-height: 1.3;
        right      : 45rem;
        top        : 45rem;

        &::before {
            content         : "";
            background-image: url(../../img/quote.png);                
            height          : 50px;
            width           : 50px;
            /* new properties */
            float: left;
            background-size: contain;
        }
}