How to draw the reference lines(blue Auxiliary lines) with css like the one in firefox devtools?

Auxiliary line

How to draw the blue dashed reference lines with css like the one in firefox development?

Answer

I finally build references line like this : to make the parent div’s top,left, width,height variables, and calc them to lines.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      :root {
        --left: 30px;
        --top: 20px;
        --width: 100px;
        --height: 60px;
      }
      .mydiv {
      
        width: var(--width);
        height: var(--height);
        left: var(--left);
        top: var(--top);
        position: relative;
        background-color: black;
      }
      .up {
        border-top: 1px dashed aqua;
        height: 1px;
        left: calc(0px - var(--left));
        line-height: 1px;
        width: 100vw;
      }
      .down {
        border-top: 1px dashed aqua;
        height: 1px;
        left: calc(0px - var(--left));
        top: var(--height);
        width: 100vw;
      }
      .left {
        border-left: 1px dashed aqua;
        width: 1px;
        top: calc(0px - var(--top));
        height: 100vh;
      }
      .right {
        border-left: 1px dashed aqua;
        width: 1px;
        top: calc(0px - var(--top));
        left: var(--width);
        height: 100vh;
      }
      .v-line {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="mydiv">
      <span class="v-line up"></span>
      <span class="v-line down"></span>
      <span class="v-line left"></span>
      <span class="v-line right"></span>
    </div>
  </body>
</html>

If you have more good idea pleace leave your answer.

Advertisement

Answer