CSS 中 ::before 和 ::after 伪元素的几个实际用途

元素设置伪元素的时候,必须设置其
content属性,浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串:
content: ""。,::before 表示在原始元素的实际内容之前表示一个可设置样式的子伪元素,::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。,默认情况下插入的新元素是内联元素。将元素插入DOM后,可以像修改其他元素一样对其进行设置CSS样式,这给了我们很多控制权及想象力。接下来将介绍几个不同的实用示例,通过
::before以及
::after来创建有趣的效果。,当用户网络出现问题的时候,可能会造成某些图片的访问失败,从而浏览器将显示一张损坏的图片图标及设置的图片的alt文字。,CSS 中 ::before 和 ::after 伪元素的几个实际用途,这样极其影响界面美观,且不同的浏览器破碎图标还会不太一样,因此可以通过伪元素自定义占位符。首先,我们要在图片元素上使用相对定位,然后再将其中一个伪元素使用绝对定位覆盖整个图片元素。,先给伪元素设置基本的背景色及边框样式;由于默认添加的伪元素是行内元素,所以需要让它变成块元素;然后content通过attr获取图片alt的文字并设置居中。,最终效果如下:
CSS 中 ::before 和 ::after 伪元素的几个实际用途,当你需要用到其他作品的引用或摘录,需要用到引用的效果,让读者能在视觉上直观的感受到。比如我们需要对本文开始的那段文字增加一个前后引号的引用效果,可以按如下方式。,首先还是需要对引用的元素本身增加相对定位。然后使用
::before第一个引号和
::after结束引号。,公共部分:,最终效果如下:
CSS 中 ::before 和 ::after 伪元素的几个实际用途,当我们使用有序(
<ol>)和无序(
<ul>)列表的时候,两者都会显示浏览器的默认样式。使用
::before伪元素,我们则可以自定义显示样式,可以是图标或者其他的CSS样式都可以。,效果如下:
CSS 中 ::before 和 ::after 伪元素的几个实际用途,切换开关用于在选中和未选中状态之间切换,所以在实现的过程中还要加上切换过程中的动画效果。,首先还是一样的给input标签增加相对定位;
::before伪元素主要实现滑块的背景区域;
::after主要实现滑块的圆形部分;通过
input选中伪类
:checked增加不同的样式并增加
translate过渡动画。,选中后的样式:,最后的效果如下:
CSS 中 ::before 和 ::after 伪元素的几个实际用途,有时候我们需要在图片上展示一些说明文字,提高图片的可读性。但是如果直接在图片上展示文字,会显得相对突兀,可以通过伪元素增加一个渐变的过程,可以让图片从渐变中显示出来。,最终效果如下:
CSS 中 ::before 和 ::after 伪元素的几个实际用途,最后来一个比较复杂的通过CSS实现苹果手机充电线的效果,只用了一个div即可实现,借助了
::before以及
::after伪元素。有兴趣的同学可以看看源码。,CSS 中 ::before 和 ::after 伪元素的几个实际用途,源码地址:https://codepen.io/jordonwang/pen/eYVMQwR,除开本文所列举的场景,伪元素还可以在很多的场景大展身手,你有通过伪元素实现什么效果吗,欢迎留言讨论。看完觉得有用,记得点赞收藏起来吧,说不定哪天就用上啦~,首先还是一样的给input标签增加相对定位;
::before伪元素主要实现滑块的背景区域;
::after主要实现滑块的圆形部分;通过
input选中伪类
:checked增加不同的样式并增加
translate过渡动画。,

CSS::before和::after伪元素允许您在任何非替换元素之前和之后插入“内容”。这有效地允许您在网页上显示 HTML 内容中可能不存在的内容。您不应该将它用于实际内容,因为它不是很容易访问,因为您甚至无法选择和复制以这种方式插入页面上的文本——它只是装饰性内容。

给元素设置伪元素的时候,必须设置其content属性,浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串:content: ""

::before 表示在原始元素的实际内容之前表示一个可设置样式的子伪元素

::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。

默认情况下插入的新元素是内联元素。将元素插入DOM后,可以像修改其他元素一样对其进行设置CSS样式,这给了我们很多控制权及想象力。接下来将介绍几个不同的实用示例,通过::before以及::after来创建有趣的效果。

破碎图片占位

当用户网络出现问题的时候,可能会造成某些图片的访问失败,从而浏览器将显示一张损坏的图片图标及设置的图片的alt文字。

CSS 中 ::before 和 ::after 伪元素的几个实际用途

这样极其影响界面美观,且不同的浏览器破碎图标还会不太一样,因此可以通过伪元素自定义占位符。首先,我们要在图片元素上使用相对定位,然后再将其中一个伪元素使用绝对定位覆盖整个图片元素。

先给伪元素设置基本的背景色及边框样式;由于默认添加的伪元素是行内元素,所以需要让它变成块元素;然后content通过attr获取图片alt的文字并设置居中。

img::before {
  background-color: #eeeeee;
  border: #aaaaaa;
  display: block;
  height: 100%;
  content: attr(alt);
  text-align: center;
}

最终效果如下: CSS 中 ::before 和 ::after 伪元素的几个实际用途

自定义引用样式

当你需要用到其他作品的引用或摘录,需要用到引用的效果,让读者能在视觉上直观的感受到。比如我们需要对本文开始的那段文字增加一个前后引号的引用效果,可以按如下方式。

首先还是需要对引用的元素本身增加相对定位。然后使用::before第一个引号和::after结束引号。

blockquote::before {
  content: open-quote;
  top: 0;
  left: 0;
}

blockquote::after {
  content: close-quote;
  bottom: 0;
  right: 0;
}

公共部分:

blockquote::before,
blockquote::after {
  background-color: #cccccc;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 1.618;
  font-size: 3em;
  border-radius: 100%;
  text-align: center;
  position: absolute;
}

最终效果如下: CSS 中 ::before 和 ::after 伪元素的几个实际用途

自定义列表图标

当我们使用有序(<ol>)和无序(<ul>)列表的时候,两者都会显示浏览器的默认样式。使用::before伪元素,我们则可以自定义显示样式,可以是图标或者其他的CSS样式都可以。

li::before {
  content: "";
}

效果如下: CSS 中 ::before 和 ::after 伪元素的几个实际用途

switch动画滑动开关

切换开关用于在选中和未选中状态之间切换,所以在实现的过程中还要加上切换过程中的动画效果。

首先还是一样的给input标签增加相对定位;::before伪元素主要实现滑块的背景区域;::after主要实现滑块的圆形部分;通过input选中伪类:checked增加不同的样式并增加translate过渡动画。

input::before {
	background: #999;
	border-radius: 50px;
	content: "";
	height: 80%;
	position: absolute;
	top: 50%;
	transform: translate(4px, -50%);
	width: 88%;
}

input::after {
	background: #fff;
	border-radius: 50px;
	content: "";
	height: 25px;
	opacity: 0.6;
	position: absolute;
	top: 50%;
	transform: translate(7px, -50%);
	transition: all .4s;
	width: 25px;
}

选中后的样式:

input:checked::before {
  background: #409eff;
}
input:checked::after {
  opacity: 1;
  transform: translate(170%, -50%);
}

最后的效果如下: CSS 中 ::before 和 ::after 伪元素的几个实际用途

图片渐变叠加

有时候我们需要在图片上展示一些说明文字,提高图片的可读性。但是如果直接在图片上展示文字,会显得相对突兀,可以通过伪元素增加一个渐变的过程,可以让图片从渐变中显示出来。

figure::before {
  background-image: linear-gradient(to top right, #1a1a1a, transparent);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

最终效果如下: CSS 中 ::before 和 ::after 伪元素的几个实际用途

苹果充电线

最后来一个比较复杂的通过CSS实现苹果手机充电线的效果,只用了一个div即可实现,借助了::before以及::after伪元素。有兴趣的同学可以看看源码。

CSS 中 ::before 和 ::after 伪元素的几个实际用途

源码地址:https://codepen.io/jordonwang/pen/eYVMQwR

除开本文所列举的场景,伪元素还可以在很多的场景大展身手,你有通过伪元素实现什么效果吗,欢迎留言讨论。看完觉得有用,记得点赞收藏起来吧,说不定哪天就用上啦~

文章版权声明

 1 原创文章作者:白净生,如若转载,请注明出处: https://www.52hwl.com/36622.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年7月15日 下午1:04
下一篇 2023年7月15日 下午1:04