interestfor-pseudo-element-appearance-ref.html (1892B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 5 <div class=example> 6 <button class=invoker><span class=before>::before</span><span>Button</span><span class=after>::after</span></button> 7 <button class=interesthint>::interest-hint</button> 8 </div> 9 <div class=example> 10 <a href=# class=invoker><span class=before>::before</span><span>Link</span><button class=interesthint>::interest-hint</button><span class=after>::after</span></a> 11 </div> 12 <div class=example> 13 <img src="/images/blue.png" usemap="#map1" width=40 height=40> 14 <span class=before>::before</span><map id="map1"><area href="/" shape="default" class=invoker></map><button class=interesthint>::interest-hint</button><span class=after>::after</span> 15 </div> 16 17 <div id=target></div> 18 19 <style> 20 .before { 21 content: "::before"; 22 border: 1px solid green; 23 } 24 /* UA stylesheet for ::interest-hint: */ 25 .interesthint { 26 user-select: none; 27 color: buttontext; 28 display: inline-block; 29 text-align: center; 30 cursor: default; 31 background-color: buttonface; 32 margin-inline-start: 0.5em; 33 padding-block: 1px; 34 padding-inline: 6px; 35 border-width: 1px; 36 border-radius: 5px; 37 border-style: outset; 38 border-color: buttonborder; 39 } 40 .after { 41 content: "::after"; 42 border: 1px solid green; 43 } 44 /* Test convenience: */ 45 .example { 46 display:block; 47 width: 400px; 48 height: 50px; 49 } 50 .invoker>span { 51 border: 1px solid black; 52 } 53 .interesthint { 54 font-family: arial; 55 font-size: 13px; 56 } 57 </style> 58 59 <script> 60 // Fix up parser moving out the button 61 const interestButton = document.querySelector('button.invoker'); 62 const movedButton = document.querySelector('button.invoker + button.interesthint'); 63 const afterSpan = interestButton.querySelector('.after'); 64 interestButton.insertBefore(movedButton, afterSpan); 65 </script>