tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

doc_pseudoelement.html (1970B)

      1 <!-- Any copyright is dedicated to the Public Domain.
      2     http://creativecommons.org/publicdomain/zero/1.0/ -->
      3 <html>
      4  <head>
      5    <style>
      6 
      7 body {
      8    color: #333;
      9 }
     10 
     11 .box {
     12    float:left;
     13    width: 128px;
     14    height: 128px;
     15    background: #ddd;
     16    padding: 32px;
     17    margin: 32px;
     18    position:relative;
     19 }
     20 
     21 .box:first-line {
     22    color: orange;
     23    background: red;
     24 }
     25 
     26 .box:first-letter {
     27    color: green;
     28 }
     29 
     30 * {
     31    cursor: default;
     32 }
     33 
     34 nothing {
     35    cursor: pointer;
     36 }
     37 
     38 p::-moz-selection {
     39    color: white;
     40    background: black;
     41 }
     42 p::selection {
     43    color: white;
     44    background: black;
     45 }
     46 
     47 p:first-line {
     48   background: blue;
     49 }
     50 p:first-letter {
     51  color: red;
     52  font-size: 130%;
     53 }
     54 
     55 .box:before {
     56    background: green;
     57    content: " ";
     58    position: absolute;
     59    height:32px;
     60    width:32px;
     61 }
     62 
     63 .box:after {
     64    background: red;
     65    content: " ";
     66    position: absolute;
     67    border-radius: 50%;
     68    height:32px;
     69    width:32px;
     70    top: 50%;
     71    left: 50%;
     72    margin-top: -16px;
     73    margin-left: -16px;
     74 }
     75 
     76 .topleft {
     77    color: blue;
     78 }
     79 .topleft:before {
     80    top:0;
     81    left:0;
     82 }
     83 :where(.topleft)::before {
     84    top:10px;
     85    left:20px;
     86    color: lime;
     87 }
     88 .topleft:first-line {
     89    color: orange;
     90 }
     91 .topleft::selection {
     92    color: orange;
     93 }
     94 
     95 .topright:before {
     96    top:0;
     97    right:0;
     98 }
     99 
    100 .bottomright:before {
    101    bottom:10px;
    102    right:10px;
    103    color: red;
    104 }
    105 
    106 .bottomright:before {
    107    bottom:0;
    108    right:0;
    109 }
    110 
    111 .bottomleft:before {
    112    bottom:0;
    113    left:0;
    114 }
    115 
    116    </style>
    117  </head>
    118  <body>
    119    <h1>ruleview pseudoelement($("test"));</h1>
    120 
    121    <div id="topleft" class="box topleft">
    122        <p>Top Left<br />Position</p>
    123    </div>
    124 
    125    <div id="topright" class="box topright">
    126        <p>Top Right<br />Position</p>
    127    </div>
    128 
    129    <div id="bottomright" class="box bottomright">
    130        <p>Bottom Right<br />Position</p>
    131    </div>
    132 
    133    <div id="bottomleft" class="box bottomleft">
    134        <p>Bottom Left<br />Position</p>
    135    </div>
    136 
    137  </body>
    138 </html>