after要素でリンクのデザインを行いたいです

###before/after要素を使いたい

html,cssをいじり始めて1年のひよっこです。。

現在[＞]を使ってリンクを作成しています。

どんな文章量にも統一したデザインになるように作成したいのですがその作成方法が分かりません。。
top,leftを%で配置してもうまくいきませんでした。

理想

現状

###該当のソースコード

html
1      <ul>
2        <li>
3          <a href="">
4            <div class="table_picture1"></div>
5            <p class="table_text">長い文章長い文章</p>
6          </a>
7        </li>
8        <li>
9          <a href="">
10            <div class="table_picture2"></div>
11            <p class="table_text">リンク</p>
12          </a>
13        </li>
14        <li>
15          <a href="">
16            <div class="table_picture3"></div>
17            <p class="table_text">ダミーテキスト</p>
18          </a>
19        </li>
20      </ul>
21

css
1ul {
2  display: table;
3  margin-top: 40px;
4}
5
6ul li {
7  display: table-cell;
8}
9
10ul li .table_picture1 {
11  width: 306px;
12  height: 300px;
13  margin-right: 22px;
14  background: url(http://placehold.it/306x300/cee8ed/?text=pic_energy_01.jpg) no-repeat;
15}
16
17ul li .table_picture2 {
18  width: 306px;
19  height: 300px;
20  margin-right: 22px;
21  background: url(http://placehold.it/306x300/cee8ed/?text=pic_energy_02.jpg) no-repeat;
22}
23
24ul li .table_picture3 {
25  width: 306px;
26  height: 300px;
27  background: url(http://placehold.it/306x300/cee8ed/?text=pic_energy_03.jpg) no-repeat;
28}
29
30ul li .table_text {
31  position: relative;
32  padding-top: 14px;
33}
34
35ul li .table_text::after {
36  content: "";
37  position: absolute;
38  top: 19px;
39  left: 50px;
40  width: 7px;
41  height: 13px;
42  background: url(../images/index/arrow.png) no-repeat;
43}

恐れ入りますがご回答頂けますと幸いです。
よろしくお願いいたします。

dit.

2017/01/12 02:28

「理想」とするものは「各リンク文字の直前に>がある状態」ということで良いのでしょうか？また、「＞」は背景画像として指定されていると思いますが、画像を使わない方法でもいいのでしょうか？（beforeにしてcontent: ">";とするなど）

takamiii_158cm

2017/01/12 02:57

「>」は画像を使用するルールになっていますのでcontentの中身は空のパターンでお願いしたいです。。

行動規範の内容に同意します

回答1件

ベストアンサー

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

css
1ul li .table-text:before {
2  background: url(../path/to/image.png) no-repeat center top;
3  background-size: contain;
4  content: "";
5  height: 16px // 「>」の画像サイズ
6  padding-right: 5px; // 任意の余白を指定
7  width: 16px; // 「>」の画像サイズ
8}