Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for different headings since the title is hardcoded in the CSS. Is using flexbox for such a small task considered good practice?
body {
background-color: #0f1932;
}
.wrapper {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px 0px;
}
.heading {
color: white;
}
.heading::before {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
transform: translateX(-50%);
opacity: 0.06;
text-transform: uppercase;
content: "demo-shadow";
}
.heading::after {
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40px;
content: "demo";
text-transform: uppercase;
white-space: nowrap;
}<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<header>
<div class="heading-container">
<h1 class="heading"></h1>
</div>
</header>
</div>
</body>
</html>.