[分享]css单元格角标

CSS单元格角标是一种可以在表格中添加小标记的技术，常用于标记重要内容或者是数据的状态。在实现角标时，我们可以利用CSS的伪元素和定位技术来实现。首先，我们需要对表格单元格添加一个class，比如我们...

CSS单元格角标是一种可以在表格中添加小标记的技术，常用于标记重要内容或者是数据的状态。在实现角标时，我们可以利用CSS的伪元素和定位技术来实现。

首先，我们需要对表格单元格添加一个class，比如我们可以命名为“mark”，然后再在CSS文件中加入如下代码：

.mark {
    position: relative;
}
.mark::after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background-color: #ff0000;
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #fff;
} 

这段代码中，我们首先将单元格的定位属性设置为relative，这样在单元格内部创建的伪元素就会相对于单元格进行定位。接着，我们使用了::after伪元素来创建一个圆形，然后使用特定的宽度和高度进行设置。我们将top和right属性设为负数值，这样就可以将圆形移动到单元格的角落。

此外，我们为圆形添加了一些其他的属性，比如文字大小、颜色、对齐方式和背景颜色等，用于美化角标。完成这些步骤后，我们就可以在表格里为需要标记的单元格添加一个“mark”类，并在里面加入内容：

<td class="mark">
    <p>这是需要标记的内容</p>
</td> 

这样，就可以实现在所有需要的单元格内添加角标，让我们的表格更加美观和实用。