before-as-flex-container.html (807B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <title>CSS Test: ::before pseudo-element as a flex container</title> 4 <link rel="author" title="Deepith N" href="mailto:deekshithdeepith@gmail.com"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#generated-content"> 7 <link rel="match" href="before-as-flex-container-ref.html"> 8 9 <style> 10 div { 11 width: 200px; 12 height: 100px; 13 background: red; /* This will show up if the test fails */ 14 } 15 16 div::before { 17 content: "A B"; /* Two "words" to become flex items */ 18 display: flex; 19 justify-content: space-between; /* Pushes "A" and "B" to the edges */ 20 width: 200px; 21 height: 100px; 22 background: green; /* This should cover the red background */ 23 } 24 </style> 25 26 <div></div>