擬似要素を使ってテキストの前に矢印を入れたい

Question

前提・実現したいこと

擬似要素を使ってテキストの前に矢印を入れたいのだが改行されてしまう。
これを改行されないでテキストの前に表示させたい。

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

擬似要素を使ってテキストの前に矢印を入れたいのだが改行されて表示される。

該当のソースコード

 <ul class="menu">
            <li class="menu__mega">
                <a href="#" class="init-bottom"></a>
                <ul class="menu__second-level">
                    <li><a href="#"><span class="large"><i class="fas fa-hospital-alt"></i></span></a></li>
                    //この下のliに適用させたい
                    <li><a href="#"></a></li>
                </ul>
            </li>
</ul>

.menu {
    position: relative;
    width: 100%;
    height: 50px;
    max-width: 1000px;
    margin: 0 auto;
    background-color: $gnav-back;
    
}

.menu > li {
    float: left;
    width: calc(100%/3); /* グローバルナビ4つの場合 */
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.menu > li a {
    display: block;
}

.menu{
    .menu__mega{
        .init-bottom{
            color: #fff;
            text-decoration: none;
            &:hover{
                background-color: $gnav-hover__back;
            }
        }
    }
}

.menu__second-level{
    .large{
        font-size: 2.0rem;
        text-decoration: none;
        i{
            color: #8d9ada;
            margin: 0 8px;
        }
    }
    li{
        &:nth-child(n+4){
            text-indent: -1;
            padding-left: 3em;
            &::before{
                content:  '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 5px 0 5px 7px;
                border-color: transparent transparent transparent #007bff;
                display:  inline-block;
                vertical-align:  middle;
                position:  relative;
                top: -2px;
                margin-right: 3px;
            }
        }
    }
    
}


.menu > li:hover {
    background: $gnav-back;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu > li a:hover {
    text-decoration: none;
    
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    
}



.menu__second-level li {
    border-top: 1px solid #111;
    
    
}


/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}

//mega
li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 40px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 2%;
    background: $second-li__back;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    box-shadow: 0 0 8px gray;
}

li.menu__mega:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: calc(100%/3);
    border: none;
    text-align: left;
}

li.menu__mega ul.menu__second-level > li:nth-child(1n+2) {
    
}

試したこと

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

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

Answer 1

原因は2点あります。

---

ひとつめは、

.menu__second-level{
//...
    }
    li{
        &:nth-child(n+4){
//...
            &::before{

となっているため、4番目以降のliにしか疑似要素がつきません。

---

ふたつめは、

.menu > li a {
    display: block;
}

となっているため、ブロック要素になりますので、改行されます。
なので、

.menu__second-level > li > a{
  display: inline;
}

などとすればいいのではないでしょうか。

---

蛇足ですが、font awesome を使っているのですから、矢印も font awesome でいいのでは？