回答編集履歴

2

読みやすく修正。

2016/07/25 13:15

投稿

kei344
kei344

スコア69407

test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  background-image: url( "data:image/gif;base64,R0lGODlhBAABAPAAAAAAAAAAACH5BAEAAAEALAAAAAAEAAEAAAIDBBIFADs=" );
72
72
 
73
- background-position: left 1.3em;
73
+ background-position: left 1.3em; /* メイリオの場合1.2emで文字直下くらいだと思われますが、フォントによって少し変わります。 */
74
74
 
75
75
  background-repeat: repeat-x;
76
76
 

1

ミスがあったため修正。

2016/07/25 13:15

投稿

kei344
kei344

スコア69407

test CHANGED
@@ -39,3 +39,55 @@
39
39
 
40
40
 
41
41
  **動くサンプル2:**[https://jsfiddle.net/3bw50zef/1/](https://jsfiddle.net/3bw50zef/1/)
42
+
43
+
44
+
45
+ ---
46
+
47
+
48
+
49
+ ---
50
+
51
+
52
+
53
+ **追記:**
54
+
55
+
56
+
57
+ 根本的に勘違いをしていたため、再チャレンジ。背景を設定する方法で。とりあえずgif(2px × 1px)で作りましたが、SVGとかにするほうが汎用性が高いと思います。
58
+
59
+
60
+
61
+ ```CSS
62
+
63
+ a {
64
+
65
+ text-decoration: none;
66
+
67
+ color:#ff0000;
68
+
69
+ font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
70
+
71
+ background-image: url( "data:image/gif;base64,R0lGODlhBAABAPAAAAAAAAAAACH5BAEAAAEALAAAAAAEAAEAAAIDBBIFADs=" );
72
+
73
+ background-position: left 1.3em;
74
+
75
+ background-repeat: repeat-x;
76
+
77
+ background-size: 4px 1px; /* 2px 1px */
78
+
79
+ }
80
+
81
+ ```
82
+
83
+
84
+
85
+ **動くサンプル3:**[https://jsfiddle.net/3bw50zef/3/](https://jsfiddle.net/3bw50zef/3/)
86
+
87
+
88
+
89
+
90
+
91
+
92
+
93
+