CSS伪元素插入文字

解决方案：

当项目中需要给UI组件中的元素插入文字时，可以使用伪元素插入文字，调整样式

此处使用:after伪元素来插入文字

/* 在vue3项目中使用:deep scope实现局部样式 */
:deep(.ant-upload-list-item-error:after) {
    position: absolute;
    content: '上传失败'; /* 插入的文字 */
    bottom: 0;
    left: 0;
    background: rgba(217, 0, 27, 1);
    width: 100%;
    color: #fff;
    text-align: center;
  }

项目场景及效果：

在使用antdv的上传组件时，需求需要的错误的回显样式：

而antd vue所拥有的样式

更改效果：

这篇好文章是转载于：学新通技术网