WordPressのwp_nav_menu()で、メニュー上部にサブタイトルを付けたいです。

Question

前提

WordPressのwp_nav_menu()で、メニューの上部にサブタイトルを付けたいです。
サブタイトルを付けることはできたのですが、タイトルの下にきてしまいます。

実現したいこと

サブタイトルを上にくるようにしたいです。
画像の赤枠で囲んだメニューのようにしたいのですが、タイトルとサブタイトルの位置が逆になってしまいます。

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

サブタイトルを付けることはできたのですが、タイトルの下にきてしまいます。

該当のソースコード

add_filter( 'walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4 );
function description_in_nav_menu($item_output, $item){
  return preg_replace( '/(<a.*?>[^<]*?)</', '$1' . "<br/><span>{$item->attr_title}</span><", $item_output );
}

<?php
			wp_nav_menu(
				array(
					'depth' => 1,
					'theme_location' => 'drawer', //ドロワーメニューをここに表示すると指定
					'container' => 'nav', //ulタグをnavタグで囲む
					'container_class' => 'pcMenu__main mainMenu', //navタグにクラス名を付与
					'menu_class' => 'mainMenu__list', //ulタグにクラス名を付与
					'add_li_class' => 'mainMenu__item', // liタグへclass追加
    		  'add_a_class' => 'mainMenu__link', // aタグへclass追加
				)
			);
			?>

			<nav class="pcMenu__main mainMenu">
				<ul class="mainMenu__list">
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Top</div>トップ<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">News</div>ニュース<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Pharmacy</div>調剤薬局<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Home Care</div>在宅医療<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Column</div>お役立ちコラム<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Company</div>会社概要<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
					<li class="mainMenu__item">
						<a href="" class="mainMenu__link">
							<div class="mainMenu__label">Contact</div>お問い合わせ<!-- /.mainMenu__label -->
						</a><!-- /.mainMenu__link -->
					</li><!-- /.mainMenu__item -->
				</ul><!-- /.mainMenu_list -->
			</nav><!-- /.pcMenu__main -->

試したこと

functions.phpの下記部分を書き換える必要があると思ったのですが、どのように書き換えれば良いのかわかりませんでした・・・。

preg_replace( '/(<a.?>[^<]?)</', '$1' . "<br/><span>{$item->attr_title}</span><", $item_output );

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

ＯＳ：Windows10

Answer 1

サブタイトルを付けることはできたのですが、タイトルの下にきてしまいます。

が、

return preg_replace( '/(<a.?>[^<]?)</', '$1' . "<br/><span>{$item->attr_title}</span><", $item_output );

でできたということであれば、 <br/> が改行している部分なので、 <span>部分と改行をリンクタグの前に持っていけばよいのでは無いかと思います。

---

コメントに対する追記

ご自身で書かれたコードではないのでしょうか。

たとえば、下記のような感じでしょうか。

return preg_replace( '/(<a.*?>[^<]*?)</', "<span>{$item->attr_title}</span><br/>" . '$1' . "<", $item_output );

Comments

[js_boy]

ご回答ありがとうございます。
リングタグの前に持ってくるやり方がわかりません・・・。

[js_boy]

このコードはネット上にあるものを参考にしたものです。
ご教示頂いたコードに変えてみたのですが、今度はタイトル属性のテキストが消えてしまいました・・・。
もうこれはCSSを書き換えた方が良いのでしょうか？