画像と矢印と文章を横に並べてそれぞれの背景色を変えたい

前提・実現したいこと

現在このようなサムネイルのある前後のページリンクを作成しています。
文字の部分の背景だけ色を変えたいです。

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

矢印と文字の部分は背景色を変えたいのですが、
aタグの部分の背景の色を変えている両方とも同じ色になってしまいます。
最初は矢印の部分に背景色を載せていたのですが、

上記の画像のような感じで矢印のみにしか色がつかず、
縦に広げようと色々したのですがうまくいきませんでした。

該当のソースコード

PHP
1<div class="prev-next-link clearfix my-5">
2	<div class="row">
3		<div class="prev-link col-md-6">
4			<?php
5			$prevPost = get_previous_post( true );
6			$prevThumbnail = get_the_post_thumbnail( $prevPost->ID, array( 120, 80 ) );
7			previous_post_link( '%link','<i class="fa fa-caret-left" aria-hidden="true"></i>' . $prevThumbnail . '<span class="prev-next-title">%title</span>' );
8			?>
9		</div>
10		<div class="next-link col-md-6">
11			<?php
12			$nextPost = get_next_post( true );
13			$nextThumbnail = get_the_post_thumbnail( $nextPost->ID, array( 120, 80 ) );
14			next_post_link( '%link', '<span class="prev-next-title">%title</span>' . '<figure class="eyecatch">' . $nextThumbnail . '</figure><i class="fa fa-caret-right" aria-hidden="true"></i>' );
15            ?>
16		</div>
17	</div>
18</div>

HTML
1<div class="prev-next-link clearfix my-5">
2          <div class="row">
3			  <div class="prev-link col-md-6">
4            <a href="//localhost:3000/template-featured-image-horizontal/" rel="prev"><i class="fa fa-caret-left" aria-hidden="true"></i><img width="80" height="80" src="//localhost:3000/wp-content/uploads/2013/03/featured-image-horizontal-150x150.jpg" class="attachment-120x80 size-120x80 wp-post-image" alt="Horizontal Featured Image" loading="lazy"><span class="prev-next-title">テンプレート: アイキャッチ画像 (横)</span></a>          </div>
5          <div class="next-link col-md-6">
6				<a href="//localhost:3000/markup-title-with-markup/" rel="next"><span class="prev-next-title">マークアップ: マークアップ付きのタイトル</span><figure class="eyecatch"><img width="80" height="80" src="//localhost:3000/wp-content/uploads/2013/03/featured-image-vertical-150x150.jpg" class="attachment-120x80 size-120x80 wp-post-image" alt="Horizontal Featured Image" loading="lazy"></figure><i class="fa fa-caret-right" aria-hidden="true"></i></a>          </div>
7		  </div>
8        </div>

CSS
1figure.eyecatch {
2	display: contents;
3}
4
5.prev-link a .fa,.next-link a .fa {
6	padding: 0 5px;
7	font-size: 1.5rem;
8}
9
10.prev-link a,.next-link a {
11	display: flex;
12	background-color: #77C2B9;
13	align-items: center;
14	color: #fff;
15	font-size: 0.8rem;
16}
17
18.prev-link a:hover,.next-link a:hover {
19	background-color: #ddf8f6;
20	color: #77C2B9;
21}
22
23.prev-link a {
24	border-radius: 0 6px 6px 0;
25}
26
27.next-link a {
28	border-radius: 6px 0 0 6px;
29}
30
31.prev-next-title {
32	margin:0 10px;
33}
34
35.next-link a {
36    justify-content: flex-end;
37}

試したこと

height: 80px;にすると縦いっぱいに伸びるのですが
矢印が真ん中に来てくれません。

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

wordpressのunderstrapというテーマを小テーマで加工しています。
BootdtrapとFontawesomeを利用しています。

Lhankor_Mhy

2021/07/27 00:50

実際に出力されたHTMLをご提示された方が、回答がつきやすいと思われます。

wakasat

2021/07/27 17:36

ありがとうございます。追記しました。

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

回答1件

ベストアンサー

フレックスレイアウトの入れ子にしてみてはどうでしょうか。

css
1.prev-link a, .next-link a {
2	display: flex;
3	background-color: #77C2B9;
4	/* align-items: center; 削除*/
5	color: #fff;
6	font-size: 0.8rem;
7}
8
9.prev-link > a > *,
10.next-link > a > * {
11	display: flex;
12	align-items: center;
13}
14.prev-link i,
15.next-link i {
16	background: red;
17}