This solution is generated by ChatGPT, correctness is not guaranteed. You might also be able to find a solution fromcommunity posts.
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.