[分享]css 数字上面花斜线

CSS为网页设计师提供了数不清的样式选项，其中一种常见的样式是数字上面用斜线画线。这种样式可以通过CSS的伪元素和transform属性来实现。/ 基础样式 / .number { : relativ...

CSS为网页设计师提供了数不清的样式选项，其中一种常见的样式是数字上面用斜线画线。这种样式可以通过CSS的伪元素和transform属性来实现。

/* 基础样式 */
.number {
position: relative;
display: inline-block;
font-size: 1.2rem;
}
/* 伪元素样式 */
.number::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid red; /* 调整斜线的颜色和宽度 */
transform: rotate(-30deg); /* 调整斜线的角度 */
}
/* 示例 */
数字1
数字2
数字3

通过上述代码，我们可以轻松地在数字上方加入自定义的斜线效果，让网页看起来更加美观和独特。