什么是 div::before 和 div::after？我们如何使用它们？

什么是 div::before 和 div::after？我们如何使用它们？

你还有关于伪元素的问题吗 div::之前 和 div::之后 ?如果是这样，请不要担心；当我学习 CSS 时，或者当我看到编码推文时，我都不理解它，其中许多开发人员展示了如何仅使用 HTML 和 CSS 制作这个和那个的教程。有时我会看到 ：：前 和 ：：后 在代码中，但当时我很困惑，没有理解，所以我查了一下，了解了更多关于伪元素的知识。

我当时很难理解这个，因为我读到的一些文章没有提供足够简单的解释让我理解，所以我尝试自己练习以找到答案。这就是我写这篇文章的原因，并试图提供一个解释，希望读过它的朋友能理解。

事不宜迟，让我们过去 ：：前 和 ：：后 以及如何使用它们。

什么是 ::before 和 ::after ？

::之前 & ::之后 是一个伪元素，它允许我们通过仅通过 css 来添加位于我们在 html 文档中创建的元素之前/之后的新内容。

我们如何在 CSS 中使用它们？

基本示例，为了使其更易于理解，您可以在第一张图片中看到，我有一个 sintax html <div>你好</div> 我使用 CSS 设置样式，如第二张图片所示，您可以看到第三张图片中显示的结果。

然后在第四张图片中，我尝试添加 div::之后 在包含属性的 css 中 [ 内容： ”.....”; ] 我用文字“Twitter”填写，

然后你可以看到结果将是 “你好推特” , 因为我用 ：：后 ，所以的话 '推特' 将添加在 div 标签之后 ( <div>你好</div> ） 我建立。

同样，如果我添加 ：：前 内容属性包含 “你好， ” ,

它现在看起来像这样。文本 '你好' 将出现在 ( <div>你好</div> ） 我建立。

所以，使用 div::之前 和 div::之后 , 我们可以很容易地在 <div> 我们创建的元素。

我们不仅可以添加文本、图像或其他内容，而且好处很多，但我在这里只介绍基础知识，例如当我们想要制作形状时。

在此示例中，我将使用代码在 html 中创建一个空 div <div><div> 以及下图中显示的 css 样式。

然后你可以看到结果会是这样的。结果将如下图所示。我能够使用该代码制作一个浅绿色的矩形。

之后，我将添加 div::之前 和 div::之后 对我们的 样式.css 代码，比如下面

然后，使用下面的代码，我们设置的位置 div::之前 在 左上方 和位置 div::之后 在 右下角 .

结果将如下所示，使用我们创建的红色矩形 div::之前 在左上角和我们使用创建的橙色矩形 div::之后 在右下角。

概括

如果你想在 div 之前或之后添加一些额外的内容，你可以使用 div::之前 和 div::之后 伪元素。这些元素由浏览器生成，不需要任何额外的 HTML 标记。

要使用它们，只需添加 ：：前 或者 ：：后 div 选择器的伪元素。然后，在伪元素内，您可以插入任何您想要的内容。

例如，假设您有一个 div，其类为 “容器” ：

然后你想在 div 之前添加一些文本，然后你可以使用 ：：前 伪元素

如果您还想在 div 之后添加图像，那么您可以使用 ：：后 伪元素

---

这就是我要说的 ：：前 和 ：：后 在本文中。感谢您花时间阅读这篇文章。希望对阅读的人有所帮助，帮助读者朋友理解 div::之前 和 div::之后 .

请让我知道这篇文章是否有帮助，如果您有任何其他解释 ：：前 和 ：：后 ，请把它们留在评论部分，以便您的朋友也可以学习。就是这样，谢谢。

让我们每天一起学习！ ~✨

我希望在我的下一个博客中再次见到你。照顾好自己，继续学习直到那时~

---

你觉得这篇文章有价值吗？

如果你喜欢这篇文章，请点赞、评论和分享这篇文章。

在社交媒体上查找并与我联系： 迪塔伊扎蒂

最初发表于 https://dir-blogs.hashnode.dev .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37310/18351714