css伪元素::before和::after怎么使用


这篇文章主要介绍“css伪元素::before和::after怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css伪元素::before和::after怎么使用”文章能帮助大家解决问题。
  首先我们来简单看一下伪元素是如何工作的。
  关于使用::after和::before的注意事项
  当且仅当它们具有content属性值时,浏览器才会将这些元素呈现为“生成的内容”。该值可以设置为空字符串:content:””;。
  当浏览器将此元素插入DOM时,它会将其插入到用于选择器的元素中。这是规范中的定义:
  ::before表示在原始元素的实际内容之前表示一个可设置样式的子伪元素
  ::after在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。
  默认情况下,此新元素将是内联元素。将元素插入DOM后,可以像修改其他元素一样对其进行修改。这给了我们很多控制权来获得各种。
  重要说明:并非所有浏览器/屏幕阅读器组合都能读取您放置在content伪元素中的内容。这应该只用于文本元素。应始终将真实内容添加到页面的标记中。
 免费云主机域名 在某些类型的链接旁边添加图标
  如果您想为用户提供有关链接的更多可视信息,可以使用::after添加图标而不添加标记。
  将“外部链接”图标添加到非绝对链接的链接处。
  a[href^=”http”]::after{
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
  background-size:contain;
  content:””;
  display:inline-block;
  vertical-align:middle;
  width:1em;
  height:1em;
  }
  在此代码中,假设将内部链接编写为相对路径,我们找到任何具有以http开头的href元素的锚标记。
  此方法的另一个好用的例子是PDF
  a[href$=”.pdf”]::after{
  content:”(pdf)”;
  font-size:.8em;
  color:tomato;
  }
  对于任何以.pdf结尾的href,我们可以附加字符串“(pdf)。”这个::after元素比图像更容易控制,因为我们有完整的CSS控件,可以调整字体大小,颜色和任何其他效果。
  有关这些选择器的更多信息,大家可以参考PHP中文网的css在线手册。
  为容器添加有趣的“边框”
  在HoudiniPaintAPI访问所有浏览器之前,您可能会觉得您的元素非常无聊。但使用简单的CSS和::before和::after,您可以为所有浏览器带来一些更有趣的效果。
  .related-article{
  padding:20px;
  position:relative;
  background-image:linear-gradient(120deg,#eaee44,#33d0ff);
  }
  .related-article*{
  position:relative;//Setstackingcontexttokeepcontentontopofthebackground
  }
  .related-article::before{
  content:””;
  background-color:#fff;
  display:block;
  position:absolute;
  top:10px;
  left:10px;
  width:calc(100%-20px);
  height:calc(100%-20px);
  }
  在此示例中,我们将背景渐变应用于父元素,并使用::before元素以简单的背景颜色“剪切”内部。尽管是两个矩形,但这给出了边框的外观。要获得适合边框的尺寸,只需要一些简单的数学运算。
  通过将伪元素定位为绝对值,我们可以控制其位置。Sass可以通过变量和数学函数使数学运算变得更容易。
  如果我们希望我们的标题在它们下面有花哨的小边框,那么如果不是一个完整的边界呢?
  我们可以使用::after元素来实现它。
  .cool-border::after{
  content:””;
  display:block;
  height:7px;
  background-image:linear-gradient(120deg,#e5ea15,#00c4ff);
  position:absolute;
  top:calc(100%+5px);
  left:50%;
  width:45%;
  transform:translateX(-50%)skew(-50deg);}.cool-border{
  position:relative;
  }
  在这个例子中,我们还将伪元素置于绝对位置。我们的“边界”的大小取决于新元素的高度。如果这是一个右边或左边的“边框”,你可以使用元素宽度来确定尺寸。
  由于这只是页面上的一个元素,我们也可以使边界偏斜。
  添加不需要添加样式标记的样式元素
  
  在许多::after示例(包括本文中的其他示例)中,您可以看到伪元素position:absolute,当然没有规则说这必须是这种情况。
  让我们使用::before和::after作为grid-items在a上放置引号
  通过将所有内容明确地放在网格上,我们不必担心额外的包装器。我们也可以使用引号作为背景图像,并允许它们minmax在我们的简单函数中进行缩放grid-template-columns。
关于“css伪元素::before和::after怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注百云主机行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: GATK4是什么

这篇文章主要介绍了GATK4是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。GATK 是 Genome Analysis ToolKit 的缩写,是一款从高通量测序数据中分析变异信息的软件,…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/14 11:18
下一篇 01/14 11:18

相关推荐