合わせ擬似要素::複数行のテキスト

Question

と私は、次のコードを有するだ後：私はa::after要素の水平方向の中心のベースラインを整列しようとしている

.container { 
 
    width: 150px; 
 
    background-color: yellow; 
 
} 
 
a { 
 
    font-size: 14px; 
 
} 
 
a:after { 
 
    content: "\003e"; 
 
    font-size: 32px; 
 
    font-weight: 700; 
 
    padding-left: 10px; 
 
}

<div class="container"> 
 
    <p> 
 
    <a>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</a> 
 
    </p> 
 
</div>

複数行のテキストの最後の行。

私はflexboxを使用しようとしましたが、最後の行の代わりに、完全な複数行のテキストの水平ベースラインに::after要素を配置します。ここで

は私の問題の例です：

JSFiddle

Answer 1

あなたはこれがどのようにの画像を提供することができますあなたはa::after

.container { 
 
    width: 150px; 
 
    background-color: yellow; 
 
} 
 
a { 
 
    font-size: 14px; 
 
} 
 
a:after { 
 
    content: "\003e"; 
 
    font-size: 32px; 
 
    font-weight: 700; 
 
    padding-left: 10px; 
 
    position: relative; 
 
    top: 5px; /* change the value to what fits you better */ 
 
    line-height:0 
 
}

<div class="container"> 
 
    <p> 
 
    <a>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</a> 
 
    </p> 
 
</div>