This solution is generated by ChatGPT, correctness is not guaranteed.
AI solution for CSS coding question on BFE.dev
12. close button in CSS
To create a close button in CSS with lines for the cross, use the following code:
.close {
position: relative;
width: 30px; /* adjust width as needed */
height: 30px; /* adjust height as needed */
background-color: transparent;
border: none;
cursor: pointer;
}
.close:before,
.close:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 2px;
background-color: #aaa;
}
.close:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
In the HTML code, add the close
class to the button
element:
<button class="close"></button>
Adjust the width
and height
properties in the CSS code to change the size of the button as needed.