While working on a CSS file for a page with a non-editable profile, I encountered the challenge of not being able to add content directly. This limitation prompted me to explore alternative solutions.
My idea was to utilize the page ID and incorporate it in the CSS using ::before pseudo-elements, creating an effect that resembles:
HTML Code (unchanged)
<body>
<div class="alpha">Main div</div>
</body>
Current CSS
.alpha::before {
position: absolute;
display block;
width: 100px;
height: 100px;
content: "First Before";
background: #09f;
}
.alpha::after {
position: absolute;
display block;
width: 100px;
margin-top: 120px;
margin-left: -58px;
height: 100px;
content: "First After";
background: #09f;
}
Desired CSS Outcome
.alpha::before::before {
position: absolute;
display block;
margin-top: 240px;
width: 100px;
height: 100px;
content: "Second Before";
background: #09f;
}
I have also included images depicting the current setup and the proposed changes: https://i.sstatic.net/RuuxD.png https://i.sstatic.net/wJVnW.png
The code snippet demonstrates the modifications effectively:
.alpha::before {
position: absolute;
display block;
width: 100px;
height: 100px;
content: "First Before";
background: #09f;
}
.alpha::after {
position: absolute;
display block;
width: 100px;
margin-top: 120px;
margin-left: -58px;
height: 100px;
content: "First After";
background: #09f;
}
.alpha::before::before {
position: absolute;
display block;
margin-top: 240px;
width: 100px;
height: 100px;
content: "First Before";
background: #09f;
}<div class="alpha">Main div</div>If possible, could the post be reopened? My initial query remains unresolved, as there were conflicting responses to my inquiry 🤔