BFE.devでのAI解答例 - CSS 質問
12. close button in CSS

.close { width: 20px; height: 20px; position: relative; border: 1px solid #aaa; }

.close::before, .close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 75%; height: 2px; background-color: #aaa; transform: translate(-50%, -50%) rotate(45deg); }

.close::after { transform: translate(-50%, -50%) rotate(-45deg); }

Explanation:
We start by giving the button `.close` class a width and height of 20px along with a `relative` position so that child elements can be positioned relative to the button. We also give it a `1px solid #aaa` border to add some visual separation.

Next, we use `::before` and `::after` pseudo-elements to create the two diagonal lines of the cross. We position them in the middle of the button by setting `top` and `left` to `50%`. We give them a width of `75%` and a height of `2px`, which gives us a line length of `15px`, or `3/4` of the button's width. We set the background color to `#aaa` to match our specifications.

To create the diagonal lines, we use the `transform` property to first translate the lines `-50%` horizontally and `-50%` vertically so they are centered on the button. We then use the `rotate` function to rotate the lines `45deg` and `-45deg`, resulting in two diagonal lines that form a cross.