凹凸显示，利用最小宽度显示的

html：


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:
love你love
我love你

css:
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
}

理解：这个其实是利用了block的元素，及时宽度设置为0，也会被里面display：line的元素撑起来。而里面的显示为line的元素，它的宽度会尽量的小，这样根据文字撑起来的。

最简洁个版本：

love你love

使用div，并设置宽度为0，是为了让span竖起来，如果没有div的挤压，span是不会竖起来的，除非你把浏览器缩小。竖起来之后，设置outline，让显示出边框来了。