Write 1: render with pseudo elements

Pseudo elements: they are called "pseudo elements" because they are not real page elements. However, all their usage and performance behaviors are the same as real page elements. You can use css styles such as page elements for them. On the surface, it looks like some elements of the page are displayed, but in fact, it is the behavior of css style. Therefore, they are called pseudo elements .
Characteristics of: before and: after
Pseudo elements achieve element effect through style, that is to say, pseudo elements do not occupy dom element nodes

Pseudo element does not belong to document, so js cannot operate it
The pseudo element is part of the main element, so clicking the pseudo element triggers the click event of the main element
Advantages and disadvantages of pseudo elements

• Advantage
• Reduce the number of DOM nodes
• Let css help solve some js problems and make them simple
• shortcoming

*Against SEO
*Unable to review elements, not conducive to debugging

: before and: after common usage scenarios
1. Clear float
2. Using attr() to realize some dynamic functions
3. Combine with counter() to realize serial number problem
4. Use of special effects

 <data-tables-server :data="leftTableData" :total="total" :loading="serverTableLoading" @query-change="queryChange" :table-props="serverTableProps" :pagination-def="serverPaginationDef" :search-def="serverSearchDef">
    <el-table-column class="up_down" prop="exposure_num_rate" label="Exposure increase on a month on month basis(%)" sortable="custom">
        <template slot-scope="scope">
            <span :class="scope.row.exposure_num_rate.includes('-')?'green':'red'">{{scope.row.exposure_num_rate}}</span>
        </template>
    </el-table-column>
</data-tables-server>
                
       // Here is the css Style         
        .red
            color red
        .red:after
            content "% ↑"
            color red
        .red:before
            content "+"
            color red
        .green
            color green
        .green:after
            content "% ↓"
            color green

Write method 2: operate dom to render

<!--<data-tables-server :data="leftTableData" :total="total" :loading="serverTableLoading" @query-change="queryChange" :table-props="serverTableProps" :pagination-def="serverPaginationDef" :search-def="serverSearchDef">-->
                    <!--<el-table-column v-for="title in tableFixedTitles" :prop="title.prop" :label="title.label" :key="title.prop" sortable="custom" fixed="left"></el-table-column>-->
                    <!--<el-table-column v-for="title in tableTitles" :formatter='formatterColumn' :prop="title.prop" :label="title.label" :key="title.prop" sortable="custom"></el-table-column>-->
                <!--</data-tables-server>-->
        // The following functions operate on dom        
        formatterColumn (row, column, cellValue, index) {
            let key = column.property
            let h = this.$createElement
            if (row[key]) { // this.twoPercentArr.includes(key.toString())
                if (key.toString().includes('rate')) {
                    if (row[key] >= 0) {
                        return h('span', {
                            style: 'color:red'
                        }, '+' + row[key] + '% ↑')
                    } else if (row[key] < 0) {
                        return h('span', {
                            style: 'color:green'
                        }, row[key] + '% ↓')
                    }
                } else {
                    return row[key]
                }
            }
        },