teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コメントの指摘を反映

2017/01/12 03:03

投稿

T_sa
T_sa

スコア353

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

1

追記

2017/01/12 03:02

投稿

T_sa
T_sa

スコア353

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