伪元素的妙用(闲着也是闲着)

伪元素其实就是用css基于某个DOM节点创造一个文档中本来没有的元素,它和其他基本元素一样可以有内容和样式并影响到布局,但因为并不真实存在于DOM中,故加了个伪字。记得第一次接触伪元素是学习清除浮动的时候。
清除浮动影响最基本的方式是对浮动元素之后的第一个元素加样式:clear:both/left/right;或者看情况在父元素设置overflow:hidden;或者粗暴地在后面加个空元素清除浮动。
后来发现原来前辈们最普遍的做法是将这句样式放在伪元素:after中
XX:after{
content:“.”;
display:block;
height:0px;
clear:both;}
除此之外,伪元素可以成为某些hack的策略,比如之前在stackoverflow看到有人问可以可以单纯用css来实现列表中list-style-disc等的换色。一般我们都是用小图标的,但是有人给出的解决方案是:
ul{list-style:none;padding:0;margin:0;}
ul li{
padding-left:1em;text-indent:-.7em;
}
ul li:before{content:'.'.color:red;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值