回答編集履歴

1

下線じゃなくて枠が希望だったようなので追記

2020/10/22 01:39

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -1,3 +1,59 @@
1
+ 背景画像として上下左右分の線をlinear-gradientで用意して、元のdivに重ねています。
2
+
3
+ [https://www.ameamelog.com/css-dotline/](https://www.ameamelog.com/css-dotline/)をかなり参考にさせていただきました。
4
+
5
+ ```html
6
+
7
+ <div class="border-bottom">test</div>
8
+
9
+ ```
10
+
11
+
12
+
13
+ ```css
14
+
15
+ .border-test::after {
16
+
17
+ content: "";
18
+
19
+ background-image:
20
+
21
+ linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
22
+
23
+ linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
24
+
25
+ linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
26
+
27
+ linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px);
28
+
29
+ background-size: 16px 1px, 16px 1px, 1px 16px, 1px 16px;
30
+
31
+ background-position: left top, left bottom, left top, right top;
32
+
33
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
34
+
35
+ position: absolute;
36
+
37
+ top: 0;
38
+
39
+ bottom: 0;
40
+
41
+ left: 0;
42
+
43
+ right: 0;
44
+
45
+ pointer-events: none;
46
+
47
+ }
48
+
49
+ ```
50
+
51
+ ---
52
+
53
+
54
+
55
+ 以下元の回答(下線の場合)
56
+
1
57
  `linear-gradient`を利用した背景をx方向に並べることでそれっぽくなると思います。
2
58
 
3
59
  線分の長さや太さは各数字を調整すれば変更できます。