CSS代码(一)：巧用content实现公式中括号的自动添加

在公式的打印输出中，括号时较难处理的一个环节，稍不注意，就容易遗忘括号的闭合，而结合使用CSS中content与quote属性可轻松实现括号的自动闭合，并能添加自定义样式。

以要输出下面的公式为例：

{a * [b / (c + d)]} 

首先设计如下的HTML结构：

<i class="quote">a*
    <i class="quote">b / 
        <i class="quote">c + d</i>
        *
        <i class="quote">e - f</i>
    </i>
</i>

然后添加如下的样式即可。

<style type="text/css">
.quote {
    /*括号的嵌套， 第一对为顶层括号，第二对为次层括号，第三队为末层括号*/
    quotes: '{' '}' '[' ']' '(' ')';
}
/* 括号的开始位置 */
.quote::before {
    color : red;
    font-weight : bolder; 
    content: open-quote;
}
/* 括号的结束位置 */
.quote:after {
    color : red;
    font-weight : bolder;
    content: close-quote;
}
</style>

结论

通过content属性可大幅减少公式中成对括号闭合的难度。