伪元素可以做很多事情

1。图标和文本未对齐。我们经常遇到彼此相邻的图标和文本。无论图标如何调整，都很难与文字和谐共处。很难实现垂直对齐。这个老话题有很多解决方案。很多人用复杂的position:absolute硬调，很麻烦，需要很多代码，但是如果用伪元素，几行就搞定了！事实上，我们的图标本质上是作为背景显示的，因此您不妨尝试将文字放在图标的位置，使其与其他图标对齐。答案是肯定的。但是我们不能把icon和word放在一起，所以我们使用伪元素添加word之后，将word的font-size调整为0，word就不会显示了！真的好用又方便！我是文字//css.logo{width:16px;高度：16px；背景：url(~"@/assets/logo/logo1.svg")。,后跟三个点'...'表示未完成，待续。..许多现成的组件已经能够满足此类要求。但有时产品童鞋会提出一些现成组件无法实现的尴尬要求。没办法，只能自己写组件。.比如这次的转置表。..所以不要多说上代码{{data}}props:{data:''},data(){return{hideMore:false}},mounted(){this.hideMore=this.$refs.tdRef.offsetHeight>22}.tb-span{&.hide-more{padding-right:20px;位置：相对；显示：内联块；高度：18px；行高：22px；宽度：100%；溢出：隐藏；&::after{位置：绝对；宽度：3em；右：12px；顶部：0；z-指数：5；背景：线性渐变（90度，透明，#fff，#fff，#fff）；文本对齐：居中；内容：'...';}}}