html：
<span class="ao"></span>
<span class="tu"></span>
css:
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid #cd0000;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: "love你love";
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
}
更好理解的版本：
html:
<span class="ao"><span style="outline:2px solid red">love你love</span></span>
<span class="tu" style="direction: rtl;"><span style="outline:2px solid red;">我love你</span></span>
css:
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
}
理解：这个其实是利用了block的元素，及时宽度设置为0，也会被里面display：line的元素撑起来。而里面的显示为line的元素，它的宽度会尽量的小，这样根据文字撑起来的。
最简洁个版本：
<div style="width:0"><span style="outline:2px solid red;">love你love</span></div>
使用div，并设置宽度为0，是为了让span竖起来，如果没有div的挤压，span是不会竖起来的，除非你把浏览器缩小。竖起来之后，设置outline，让显示出边框来了。
