我们经常遇到图标和文字挨着,不管图标怎么调都很难与文字和谐共处一行,很难实现垂直对齐。这个古老的话题有挺多解决方式的,很多人借助复杂的position: absolute硬调,挺麻烦的,还要写很多代码,不过使用伪元素的话,几行就可以搞定啦!
其实本质上我们的图标是被用作背景显示出来的,那么不妨试试在图标的地方放上文本是不是就与其他的对齐了呢,回答是yes。但是我们总不能把图标和字一起摆出来,所以我们使用伪元素加上字后,将字的font-size调为0字就不显示啦!真的是好用又方便!
<span class=logo></span>
<span>我是文字</span>
// css
.logo {
width: 16px;
height:16px;
background: url(~"@/assets/logo/logo1.svg")
&::after {
content: '图标';
font-size: 0px;
}
}
开发过程中,尤其是表格中经常会有这样的需求,文本超多一定长度要隐藏掉,后面跟上’...‘三个点表示未完待续。。。很多现成的组件已经能够完成这样的需求了。但是有时产品童鞋会提出一些尴尬的需求是现成组件实现不了的,没办法,只能靠我们亲自操刀写组件。。比如这次的转置的表格。。。
so不多说上代码
<td>
<el-tooltip :content="data" :disabled="!hideMore" placement="top">
<span ref="tdRef" class="tb-span" :class="{'hide-more': hideMore}">
{{data}}
</span>
</el-tooltip>
</td>
props: {
data: ''
},
data() {
return {
hideMore: false
}
},
mounted() {
this.hideMore = this.$refs.tdRef.offsetHeight > 22
}
.tb-span {
&.hide-more {
padding-right: 20px;
position: relative;
display: inline-block;
height: 18px;
line-height: 22px;
width: 100%;
overflow: hidden;
&::after {
position: absolute;
width: 3em;
right: 12px;
top: 0;
z-index: 5;
background: linear-gradient(90deg,transparent,#fff,#fff,#fff);
text-align: center;
content: '...';
}
}
}
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?
CSS 里面的伪元素其实是非常好用的,但是经常容易被大家忽略,伪元素里面常用到的 content 属性,可能现在很多人仅仅以为 content 属性的值只支持字符串,除了字符串外常用到的还有 uri、counter ,今天所要介绍的就是 conter(计数器)。
现在,在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色,大小或类型很简单。利用css的:marker伪元素,我们可以很轻易的更改内容以及项目符号和数字的某些样式。::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上
伪元素用于向某些选择器设置特殊效果。已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。
CSS 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JavaScript 代码。虽然许多开发人员都熟悉常用的伪元素,例如::before和 ::after,但还有一些其他元素经常被忽视或未得到充分利用
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!