解决方案：

当项目中需要给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所拥有的样式

更改效果：

CSS伪元素插入文字相关推荐

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
css嵌入样式元素,css伪元素怎么用在内嵌样式？
css伪元素可以直接在内嵌样式中使用,使用语法为:<style>选择器:pseudo-element{属性名:属性值;}</style>.然后直接通过选择器即可使用伪元素. 伪 ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
css伪元素选择器，first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等代码如下: p:firs ...
P17-前端基础-CSS伪元素选择器
P17-前端基础-CSS伪元素选择器 1.概述伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置) 伪元素使用 :: 开头 ::first-letter 表示第一个字母 -::first- ...
使用伪元素插入图片大小调整问题
css使用伪元素插入图片大小调整问题需求描述: 想要利用伪元素在a标签后插入图片,调整为合适大小. 效果图: 问题描述: 使用伪元素例如::after的content属性插入图片不能调整图片大小问题 ...
CSS 伪元素和伪类
CSS 伪元素用于设置元素指定部分的样式. ::first-line伪元素用于向文本的首行添加特殊样式. 注意:::first-line 伪元素只能应用于块级元素. 以下属性适用于 ::first-l ...

CSS伪元素插入文字

解决方案：

项目场景及效果：

CSS伪元素插入文字相关推荐

最新文章

热门文章