在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能,本章学习一些进阶功能,看看伪元素能实现哪些方便好用的功能。
如果一个元素内部的子元素全部都是浮动的话,那么这个元素会出现高度塌陷,这个时候就需要清除浮动。高度塌陷的负面作用主要有:不能正确显示背景,边框不能撑开,margin 和 padding 不能正确显示。
假设有代码如下:
html:
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
css:
.outer {
border: 1px solid;
background: #ccc;
margin: 10px;
padding: 5px;
}
.inner {
float: left;
width: 80px;
height: 80px;
border: 1px solid;
}
使用伪元素清除浮动的办法:
.outer {
zoom: 1; // IE6/7 兼容性
}
.outer:after {
content: "";
display: block;
clear: both;
}
其它清除浮动的办法:
(1)给父元素设置高度。
(2)clear: both
清除浮动。
常见的用法是在父元素结束之前,统一引入一个元素 clear: both
用来清除浮动。
html:
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="clear"></div>
</div>
css:
.clear {
clear: both;
}
这种方法实现起来很简单,不过缺点也很明显,引入了额外的 DOM 元素。
clear 属性可以对应的属性值有:
(3)给父级元素定义 overflow: auto
或者 overflow: hidden
.outer {
overflow: auto;
zoom: 1; // IE6/7 兼容性
}
使用 overflow 属性来清除浮动只可以使用 hiddent 和 auto 不能使用 visible。 为了兼容 IE 最好用 overflow:hidden
,缺点是元素会被截断。
总结清除浮动最佳方案
// 全浏览器通用的 clearfix 方案
// 引入了 zoom 以支持 IE6/7
// 同时加入 :before 以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
这点在移动端开发显得尤为重要,可以增强用户体验。
html:
<button class="btn">click</button>
css:
.btn {
position: relative;
}
.btn:before {
content: '';
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
还有一种不使用伪元素扩大可点击范围的方式是使用 border + background-clip
.btn {
border: 20px solid transparent;
background-clip: padding-box;
}
实现方式
html:
<p class="divide">我是分割线</p>
css:
.divide {
width: 100%;
text-align: center;
}
.divide:before, .divide:after {
content: "";
position: absolute;
margin: 14px 14px 10px 10px;
height: 1px;
width: calc(50% - 75px);
background-color: red;
padding: 0 10px;
}
.divide:before {
left: 0;
}
.divide:after {
right: 0;
}
通过在 content 中使用 attr 函数可以调用元素的属性。
a:after {
content: attr(href);
}
a:before {
content: url(https://lz5z.com/assets/img/avatar.svg);
}
html:
<ol class="sites">
<li><input type="checkbox">Apple</li>
<li><input type="checkbox">Google</li>
<li><input type="checkbox">Amazon</li>
<li><input type="checkbox">Facebook</li>
</ul>
<p>一共选择了<span class="count"></span>个网站</p>
css:
.sites {
counter-reset: site;
}
.sites input:checked {
counter-increment: site;
}
.count:before {
content: counter(site);
}
html:
<ol id="sites">
<li class="checked">Apple</li>
<li>Google</li>
<li class="checked">Amazon</li>
<li>Facebook</li>
</ol>
css
li {
font-size: 14px;
line-height: 1.5;
cursor: pointer;
}
li:before {
color: #7cfc00;
background: #fff;
border: 2px solid #d3d3d3;
content: " ";
width: 16px;
height: 16px;
line-height: 1;
margin-left: -38px;
position: absolute;
text-align: center;
vertical-align: middle;
cursor: pointer;
pointer-events: all;
}
li.checked:before {
background: green;
border: 2px solid green;
color: #fff;
content: "\2714";
}
在网上还有很多关于伪元素的用法,非常有趣,既能减少 DOM 元素数量,还能用 CSS 实现一部分 JS 的功能,非常酷炫,后面见到有趣的用法会不断记录。