Auxiliary line
How to draw the blue dashed reference lines with css like the one in firefox development?
Advertisement
Answer
I finally build references line like this : to make the parent div’s top,left, width,height variables, and calc them to lines.
JavaScript
x
67
67
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<title>Document</title>8
<style>9
body {10
margin: 0;11
}12
:root {13
--left: 30px;14
--top: 20px;15
--width: 100px;16
--height: 60px;17
}18
.mydiv {19
20
width: var(--width);21
height: var(--height);22
left: var(--left);23
top: var(--top);24
position: relative;25
background-color: black;26
}27
.up {28
border-top: 1px dashed aqua;29
height: 1px;30
left: calc(0px - var(--left));31
line-height: 1px;32
width: 100vw;33
}34
.down {35
border-top: 1px dashed aqua;36
height: 1px;37
left: calc(0px - var(--left));38
top: var(--height);39
width: 100vw;40
}41
.left {42
border-left: 1px dashed aqua;43
width: 1px;44
top: calc(0px - var(--top));45
height: 100vh;46
}47
.right {48
border-left: 1px dashed aqua;49
width: 1px;50
top: calc(0px - var(--top));51
left: var(--width);52
height: 100vh;53
}54
.v-line {55
position: absolute;56
}57
</style>58
</head>59
<body>60
<div class="mydiv">61
<span class="v-line up"></span>62
<span class="v-line down"></span>63
<span class="v-line left"></span>64
<span class="v-line right"></span>65
</div>66
</body>67
</html>If you have more good idea pleace leave your answer.