开发笔记📐 发现👽 人物👮 趣闻💦
CSS:after选择器简单说明 以及如何用after对clearfix进行改进

CSS:after选择器简单说明 以及如何用after对clearfix进行改进
2018-06-02 10:54:59   点击:

所有主流浏览器都支持 :after 选择器。:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

在每个 <p> 元素后面插入内容,并设置所插入内容的样式:

p:after
{
content:"台词:-";
background-color:yellow;
color:red;
font-weight:bold;
}

:before 和 :after选择器太灵活了,貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。

很多第一次使用是因为他们需要对clear-fix进行改进。

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
}  
  
.clearfix {   
   *display: inline-block;   
   _height: 1%;  
}

这个改进使用了:after伪类元素来在元素后增加一个空间,然后清除它。这个牛X的技巧你应该收藏到工具包里,特别是当overflow:hidden方法无能为力的时候。

参考 30个你必须记住的CSS选择符

CSS after 前端 clearfix

上一篇:PHPCMS后台更新/安装CKEDITOR步骤 美观大气的编辑器
下一篇:CSS:overflow-x和overflow-y滚动条配置冲突的问题