如何使用伪元素扩大按钮可点击区域

发布网友发布时间：2022-04-22 04:28

共1个回答

热心网友时间：2022-04-20 18:45

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。

#id:after{
...
}
#id::after{
...
}

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。
本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。

哪些标签不支持伪元素？（补充于2016.06.28）
我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。
伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。
究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

利用 after 清除浮动
这个估计是前端都知道，运用 after 伪元素清除页面浮动，不做过多解释。
1
2
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

伪元素与 css sprites 雪碧图
这个也是老姿势了。雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。
但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：
-->

譬如上面这种情况（假设按钮中的图标是采用了雪碧图），产品某天突然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距肯定就不够了，导致其他图形出现在按钮中。
而我们通常不会为了一个小 icon 多添加一个标签（不符合语义化）。
所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。

单个颜色实现按钮 hover 、active 的明暗变化
最近项目有个这样的需求，根据不同的业务场景，运营需要配置一个按钮的不同背景色值。但是我们知道，一个按钮通常而言是有 3 个色值的，normal 状态的，hover 状态的和 active 状态的，通常 hover 是比原色稍微亮一点，active 则是稍微暗一点。