Awesome5のアイコンの表示について

前提・実現したいこと

マウスでhoveした時にAwesome5のアイコンを表示したするように作成したのですが、hove時にアイコンの幅分テキストがずれてしまいます。実現したいことは、Flexboxは理由があり使えないので下記のソースの修正で
1.hove時にアイコンの幅分テキストがずれないようにしたい。
2.テキストは上段、アイコンは下段の2段で表示しかつ、テキストとアイコンを中央表示したい。
宜しくお願い致します。

発生している問題・エラーメッセージ

hove時にアイコンの幅分テキストがずれてしまう。
テキストは上段、アイコンは下段の2段で表示しかつ、テキストとアイコンを中央表示する方法が分からない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6
7<meta name="viewport" content="width=device-width">
8<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9<style>
10ul{
11	margin-left: 1em;
12	margin-top: 1em;
13	margin-bottom: 1em;
14	list-style-type: none;
15	text-align: center;
16}
17
18ul li a{
19	color : #333333;
20	float: left;
21	width: 16em;
22	display: block;
23	border : 1px solid #e8e8e8;
24	margin-top: 2px;
25	margin-bottom: 2px;
26	margin-left: 0.5em;
27	border-radius: 5px;
28	height: 3em;
29	line-height: 3em;
30}
31
32ul li a:hover{
33	color : #ffffff;
34	list-style-type: none;
35	background-color : olive;
36	-webkit-transition: all 0.3s ease;
37	-moz-transition: all 0.3s ease;
38	-o-transition: all 0.3s ease;
39	transition: all  0.3s ease;
40}
41
42ul li a:hover::before{
43	font-family: "Font Awesome 5 Free";
44	content: "\f0d7";
45	font-weight: 900;
46	float: right;
47	margin-right: 1em;
48	vertical-align: middle;
49}
50</style>
51</head>
52<body>
53       <ul>
54         <li><a href="#">test1</a>
55         <li><a href="#">test11</a>
56         <li><a href="#">test11111</a>
57         <li><a href="#">test1111</a>
58       </ul>
59</body>
60</html>

試したこと

ul li a:hover::before{
font-family: "Font Awesome 5 Free";
content: "\f0d7";
font-weight: 900;
float: right;
margin-right: 1em;
vertical-align: middle;
}
のソースを作成しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/07/25 05:05

質問本文表現間違ったまま使っているところがあるので修正願います >hove 「試したこと」のコードもマークダウンのcode機能を利用してご提示ください。

x_x

2019/07/25 05:21

「Flexbox」が使えない理由は何でしょうか？古いブラウザが対象になっているのであれば重要なので追記してください。

kurobuta

2019/07/25 07:49

古いブラウザは使用していません。ソースの構造上display: block;のfloat: left;を利用したいです。

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

回答1件

ベストアンサー

floatで並べると、その分はズレます。
「position: absolute;」を使用してみてはどうですか？

CSS
1ul li a {
2    float: left;
3    color : #333333;
4    width: 16em;
5    display: block;
6    border : 1px solid #e8e8e8;
7    margin-top: 2px;
8    margin-bottom: 2px;
9    margin-left: 0.5em;
10    border-radius: 5px;
11    height: 3em;
12    line-height: 3em;
13    position: relative; /* ← 追加 */
14}
15
16ul li a:hover::before {
17    font-family: "Font Awesome 5 Free";
18    content: "\f0d7";
19    font-weight: 900;
20    float: right;       /* ← 削除 */
21    margin-right: 1em;  /* ← 削除 */
22    vertical-align: middle;
23    position: absolute; /* ← 追加 */
24    right: 1em;         /* ← 追加 */
25}