回答編集履歴

2

コメントの指摘を反映

2017/01/12 03:03

投稿

T_sa
T_sa

スコア353

test CHANGED
@@ -8,10 +8,24 @@
8
8
 
9
9
  ul li .table-text:before {
10
10
 
11
+ background: url(../path/to/image.png) no-repeat center top;
12
+
13
+ background-size: contain;
14
+
11
- content: ">";
15
+ content: "";
16
+
17
+ height: 16px // 「>」の画像サイズ
12
18
 
13
19
  padding-right: 5px; // 任意の余白を指定
20
+
21
+ width: 16px; // 「>」の画像サイズ
14
22
 
15
23
  }
16
24
 
17
25
  ```
26
+
27
+
28
+
29
+ [追記]
30
+
31
+ arrowを背景画像で処理する場合、画像サイズを疑似要素のheight, widthに明記してあげてbackground-imageに指定するといいと思います。

1

追記

2017/01/12 03:02

投稿

T_sa
T_sa

スコア353

test CHANGED
@@ -1,4 +1,6 @@
1
- afterの疑似要素ではなく、beforeを使うことで絶対指定をする必要がなくなります。
1
+ 「>」を背景画像にする必要が無い場合、afterの疑似要素ではなく、beforeを使うことで絶対指定をする必要がなくなります。
2
+
3
+ 背景画像にする必要がある場合でも position: absolute; を使わなくても下記方法+サイズ指定でいけると思います。
2
4
 
3
5
 
4
6