tor-browser

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

inheritance-pseudo-element.html (1207B)

      1 <!doctype html>
      2 <title>@keyframes + pseudo-element inherits from the right style.</title>
      3 <link rel="author" href="https://mozilla.org" title="Mozilla">
      4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1757017">
      5 <link rel="help" href="https://drafts.csswg.org/css-animations/#property-index">
      6 <link rel="match" href="inheritance-pseudo-element-ref.html">
      7 <style>
      8 body {
      9  font-size: 30px;
     10 }
     11 
     12 .container {
     13  font-size: 5px;
     14  height: 40px;
     15 }
     16 
     17 .container::after {
     18  content: "";
     19  display: block;
     20  border: 2px solid blue;
     21  width: 1em;
     22  height: 1em;
     23 }
     24 
     25 @keyframes kf-fs5px { from, to { font-size: 5px; } }
     26 .fs5px::after {
     27  animation: kf-fs5px 1s infinite;
     28 }
     29 
     30 @keyframes kf-fs1em { from, to { font-size: 1em; } }
     31 .fs1em::after {
     32  animation: kf-fs1em 1s infinite;
     33 }
     34 
     35 @keyframes kf-fs100p { from, to { font-size: 100%; } }
     36 .fs100p::after {
     37  animation: kf-fs100p 1s infinite;
     38 }
     39 
     40 @keyframes kf-fsinherit { from, to { font-size: inherit; } }
     41 .fsinherit::after {
     42  animation: kf-fsinherit 1s infinite;
     43 }
     44 </style>
     45 <div class="container"></div>
     46 <div class="container fs5px"></div>
     47 <div class="container fs1em"></div>
     48 <div class="container fs100p"></div>
     49 <div class="container fsinherit"></div>