#abslength previewer

dabblet.css

/* #abslength previewer */

#abslength {
  max-width: 100%;
  height: 20px;
  border: 1px solid white;
  border-radius: 0;
  transition: .3s;
  transition-property: width;
}
#abslength:before {
  bottom: -7px;
  background:
    url(noise.png),
    linear-gradient(-45deg,
      hsla(200, 10%, 20%, 0) 47%,
      hsl(200, 10%, 20%) 48%);
}
#abslength:after {
  border: 0;
  background:
    repeating-linear-gradient(left,
      transparent,
      transparent 19px,
      rgba(255,255,255,.6) 19px,
      rgba(255,255,255,.6) 20px)
      left top no-repeat,
    repeating-linear-gradient(left,
      transparent,
      transparent 4px,
      rgba(255,255,255,.4) 4px,
      rgba(255,255,255,.4) 5px)
      left top no-repeat,
    url(noise.png),
    linear-gradient(
      hsla(200, 10%, 20%, .8),
      hsl(200, 10%, 20%));
  background-size: 100% 10px, 100% 5px, auto, auto;
  box-shadow: none;
}

.previewer {
    position: absolute;
    border-radius: 8px;
    box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}
/* tick */
.previewer:before {
    content: '';
    position: absolute;
    bottom: -6px; /* move half the width left to center */
    left: 50%; /* left edge at center */
    width: 12px;
    height: 12px;
    border: inherit;
    margin-left: -6px; /* drag left 6px (half the width) to center */
    background: white;
    transform: rotate(45deg); /* make a square a triangle */
    box-shadow: inherit;
}
/* content canvas of the previewer */
.previewer:after {
    content: '';
    position: absolute;
    /* make edges touch parent elements, match dimensions */
    top: 0; right: 0; bottom: 0; left: 0;
    border: 5px solid white;
    border-radius: inherit;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
}

dabblet.html

<div id="abslength" class="previewer" style="width: 100px"></div>

settings.json

{"view":"split","prefixfree":"1","page":"html"}