2.3-31 伪元素

最新推荐文章于 2024-07-08 16:01:05 发布

洋芋不姓杨

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量90

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/youaigusheng/article/details/125540205

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

伪元素

1、定义

伪元素，顾名思义，表示虚拟动态创建的元素；
伪元素用双冒号表示，IE8可以兼容单冒号；

2、::before

::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      a::before{
          content:"☆";
      }
  </style> 
</head>
<body> 
    <a href="http://www.baidu.com">二月</a>
</body>
</html>

3、::after

::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      a::after{
          content:"☆";
      }
  </style> 
</head>
<body> 
    <a href="http://www.baidu.com">二月</a> 
</body>
</html>

4、::selection

::selection css伪元素应用于被用户高亮的部分（使用鼠标圈选的部分）
//选中时的颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      .box1::selection{
          background-color: darkmagenta;
          color: darksalmon;
      } 
  </style> 
</head>
<body>
     <div class="box1">
         啾啾啾啾&nbsp啾啾啾
     </div> 
</body>
</html>

5、::first-letter

::first-letter会被选中某元素中（必须是块级元素）第一行的第一个字母；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      .box1::first-letter{
          font-size: 40px;
      } 
  </style> 
</head>
<body>
     <div class="box1">
         啾啾啾啾&nbsp啾啾啾
     </div>  
</body>
</html>

6、::first-line

::first-letter会被选中某元素中（必须是块级元素）第一行的全部文字；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      .box1::first-line{
          font-size: 40px;
          text-decoration:underline;
          //添加下划线
      } 
  </style> 
</head>
<body>
     <div class="box1">
         啾啾啾啾&nbsp啾啾啾
     </div>  
</body>
</html>