css 中使用行内样式套行内样式，换行后，第一个字符没有定位？

Question

css 中使用行内样式套行内样式，换行后，第一个字符没有定位？

使用行内元素定位，元素换行，首字符，不显示对应的样式。
怎么做才让子元素有下滑线。
代码样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">  
<title></title>
<style>
    .row {}
    .row span {
     position: relative
    }
    .row span::before {
      position: absolute;
      content: "";
        left: 0;
        right: 0;
        bottom: -3px;
        height: 3px;
        background: #f00;
    }
</style>
</head>

<body>
    <span class="row">
        <span>最</span>
        <span>近</span>
        <span>的</span>
        <span>已</span>
        <span>定</span>
        <span>位</span>
        <span>祖</span>
        <span>先</span>
        <span>元</span>
        <span>素</span>
        <span>根</span> 
        <span>据</span>
        <span>正</span>
        <span>常</span>
        <span>文</span>
        <span>档</span>
        <span>流</span>
        <span>进</span>
        <span>行</span>
        <span>定</span>
        <span>位</span>
        <span>你</span>
    </span>
</body>
</html>

效果显示：