I am trying to create a unique design with a psuedo element that has a pink background within a div. Here is the code snippet:
<div>
Hello
</div>
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
}
div::after {
content: "";
background-color: pink;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
If you want to visualize it, check out this Codepen link: http://codepen.io/acha5066/pen/oXVPzg. My goal is to have the pink background in front of the green one but behind the text "Hello." How can I achieve this effect?