常见伪元素的使用before-after

最新推荐文章于 2024-05-10 00:53:46 发布

小林芝คิดถึง

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量466

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/coderlhj666/article/details/124795866

版权

常见伪元素的使用before-after

一、为什么有些场景使用伪元素会更好呢？

为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容。

假如我需要在一段文本之前添加一些文字，首先我们可能会想到的是在前面或者后面使用span元素添加

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box1 {
         }

  .before {
         
    color: #f00;
  }

  .after {
         
    color: blue;
  }
</style>

<body>
  <div class="box1">
    <span class="before">npm</span>
    我是box1
    <span class="after">npa</span>
  </div>
</body>

</html>

通过上面代码可以发现用用span元素也可以实现，但是如果我们有多个这样需要添加前后文字或者其他的，就会出现一下情况

<!DOCTYPE html>
<html lang="en">

<head>
  <meta

最低0.47元/天解锁文章

小林芝คิดถึง

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见伪元素的使用before-after

常见伪元素的使用before-after一、为什么有些场景使用伪元素会更好呢？为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)常通过 content 属性来为一个元素添加修饰性的内容。假如我需要在一段文本之前添加一些文字，首先我们可能会想到的是在前面或者后面使用span元素添加<!DOCTYPE html><html lang="e
复制链接

扫一扫