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); }

```js

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.