高度30px，宽度自适应，点线在文字中间

<style>

 .div{ position: relative; 100%; height: 30px; background: #ffff00}
        .div b{ display: block; height: 0; border-bottom: 1px dashed #ff0000; 100%}
        .f1{ float: left; position: relative; left: 50%}
        .f1 span{ float: left; position: relative; height: 30px; line-height: 30px; background: pink;
            padding: 0 20px;font-size: 14px; left: -50%; margin-top: -15px;}

</style>

<div class="div">
    <b></b>
    <div class="f1">
        <span>亲爱的你好哦</span>
    </div>
</div>