凹凸曼但没有小怪兽 CSS的世界

需求：使用一层HTML标签实现如下效果

效果图

套路图

这是从“ CSS的世界 ”中学来的（P2​​3），大神就是大神，熟练掌握着css各种属性的特性。

以下是代码：  

<span class="ao"></span>
<span class="tu"></span>

.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你";
}

原理：这是显示：内联块;的“首选最小宽度”属性，即当元素宽度：0;时，元素的宽度由文字/图片决定。

    文字最小宽度原则：

        1.东亚文字（如中文），最小宽度是每个汉字的宽度，如例子所示。

        2.西文，由特定的连续的英文字符单元决定，一般终止于空格，短横线，问号及其他非英文字符等，可以自己修改代码感受一下（可以用字符：盈亏所有;实现每一个字符都是最小单位）。

        3.图片就是图片宽啦。

此部分更深层次知识涉及宽度：汽车;及内部尺寸与流体特性（都是张老师的专业术语），感兴趣可以自行查阅。

PS（一小部分读后感）：可能你会觉得整个职业生涯中都不会有这样的需求，常用的效果我们都能实现，知道这个特性有什么用其实这只是一个小小的例子，来让读者明白他的效果，真正的意义在于你明白整个宽度的特性之后（哎），你的代码会更精炼，可读性强，可维护性强...整体来说就是代码优化，提高开发效率。