I’m trying to figure out how to accomplish this design. The image had a grid stack with a border that allow the grid to sort of pop off the page.
body {
margin: 0;
padding: 0;
}
.contact-form-container {
position: relative;
width: 50%;
}
.contact-form {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.contact-form:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px solid red;
z-index: -1;
border-radius: 10px;
}
<div class="contact-form-container">
<form class="contact-form">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<textarea name="message" placeholder="Message"></textarea>
<button type="submit">Submit</button>
</form>
</div>
4
Answers
You can do that by adding an after element to the grid container and placing it under the content.
Your code sample seems to do this just fine already. The only changes I made was to center the
.contact-form-container
and the adjust the specific positions on the::before
selectorYou’re already pretty close to the answer.
The issue is that you’re using
-10px
for the top and the bottom values. That means it’s going out (away) from the element that it’s supposed to go behind. That is why this works for the left and right. If you set the top and bottom be10px
it will go in and be behind the item.This should work. I added display grid and a column schema while slightly modifying the top and bottom position of the before element. Also make sure the form doesnt have a color
For the record you were nearly there