What's the difference between using ::before & ::after vs hard coding the image in the HTML?

Question

So I'm trying to create this web design with a gradient svg background (red) and another svg on top of the background (blue)

So what I want to know is what's the difference between hard coding the svgs directly into the html vs using ::before & ::after

Here's the first example using ::before & ::after

            <div class="container">
                <nav>
                    <div class="navbar-menu">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                        
                        </ul>
                    </div>
                </nav>
            </div>

CSS for example 1 for the blue and red svg

                .container:before {
                    content: '';
                    display: block;
                    position: absolute;
                    background: url(red.svg) no-repeat;
                    width: 100%;
                    height: 100%;
                    max-width: 60%;
                    top: 0%;
                    right: -5%;
                }

                .container:after {
                    content: '';
                    display: block;
                    position: absolute;
                    background: url(blue.svg) no-repeat;
                    width: 100%;
                    height: 100%;
                    max-width: 50%;
                    top: 20%;
                    right: -10%;
                    transform: rotate(-20deg);
                }

Now here's the way of hard coding it into the html

            <div class="container">
                <img src="red.svg" alt="">
                <nav>
                    <div class="navbar-menu">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                        
                        </ul>
                    </div>
                </nav>
                <img src="blue.svg" alt="">
            </div>

Then for the CSS I'd just target them the same way by adding a class to each img

So I'm wondering what's the proper way to implement this style of design?

Answer 1

You should not be using ::before and ::after to replace standard HTML, which is more or less what you are doing here. I'd say the main purpose of those pseudo selectors is to hack the styling for certain repeating elements, where normal CSS won't do the trick. A good example is pretty checkboxes. In some CSS frameworks, the default control is hidden away and replaced by content using ::after. But it's done that way because it's the only way to get around the limitations of the default implementation. Using it to insert display elements into a page when the same thing could easily be done in plain HTML makes your code harder to read and maintain and more complicated than it needs to be.