JSFiddle - React, Tailwind, and code Playground

by Aaron Bird

HTML

<style type="text/css">

</style>
<div class="box-8">
    <span class="child-8" style="display:inline-block;vertical-align: middle;">
        Alice was beginning to get very tired of sitting by her sister on the bank
    </span>
</div>

CSS

.box-8 {
        width: 200px;
        min-height:200px;
        height:10px;
        height: 0;
        overflow:hidden;
        border: 1px solid;
    }
    .child-8 {
        width: 180px;
        background: green;
    }
    /*添加伪元素*/
    .box-8:before {
        content:"";
        display: inline-block;
        width: 10px;
        height:100%;
        background: yellow;
        vertical-align: middle;
    }