将伪元素:: after与多行文本对齐

Question

I'm having to following code:

 .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> 

I'm trying to align the horizontal center baseline of an a::after element with the last line of a multiline text.

I've tried to use flexbox but this will center the ::after element with the horizontal baseline of the complete multiline text instead of the last line.

Here's an example of my problem:

JSFiddle

Answer 1

you can add position:relative and top:5px to 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>