Create a close button in CSS. Lines for the cross should have 1. length : 3/4 of button width 2. thickness: 2px 3. color: #aaa <button class="close"><…

13. list numbering

11. fit the image

12. close button in CSS

<pre class="shiki github-dark shaku"><code> /* In CSS, when you apply position: absolute to a flex item, it gets taken out of the normal flex flow. This means align-items: center and justify-content: center on the parent won't automatically position them anymore. Instead, they position themselves relative to the closest parent with position: relative (which is .close). */ /* To perfectly center absolute elements, you'd usually add top: 50%; left: 50%; transform: translate(-50%, -50%); */ .close { position: relative; border: 1px solid #aaa; border-radius: 50%; /* display: flex; */ /* align-items: center; */ /* justify-content: center; */ } .close::before, .close::after { content: ''; position: absolute; width: 75%; height: 2px; background-color: #aaa; top: 50%; left: 50%; } .close::before { transform: translate(-50%, -50%) rotate(45deg); } .close::after { transform: translate(-50%, -50%) rotate(-45deg); }</code></pre>