CSS使用伪元素来表示元素中的一些特殊位置

最新推荐文章于 2024-07-20 11:36:35 发布

Mr__ZzZz

最新推荐文章于 2024-07-20 11:36:35 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： CSS 伪元素第一个字第一行元素首部与尾部

本文链接：https://blog.csdn.net/Mr__ZzZz/article/details/84305594

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 伪元素用于向某些选择器设置特殊效果。直接上样例。

p元素中的内容

<p>我是一个段落 我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
</p>

为p中的第一个字符设置样式

       /*
        为p中的第一个字设置样式，将字体颜色设置为红色，字体大小为30px
        */
        p:first-letter{
            color: red;
            font-size: 30px;
        }

将第一个字设置为红字，大小为30px
为p中的第一行设置一个样式

 /*
        为p中的第一行设置一个样式，将背景色设为黄绿色
        */
        p:first-line{
            background-color: yellowgreen;
        }

在前一个操作下，将背景色设为黄绿色
before表示元素的最前面的位置，after表示元素的最后面的位置，一般before都要结合content样式一起使用，通过content可以向before或after的位置添加一些内容。

在p元素最前方加一段文字xxxxxx。

  p:before{
            content: "xxxxxx";
        
     }

在以上操作后，将xxxxxx插入到p标签原有的内容之前
在p元素最后方加一段文字kkkkkkkkkkkkkkkkkk。

  p:after{
            content: "kkkkkkkkkkkkkkkkkk";
   }

将kkkkkkkkkkkkkkkkkk插入到p标签原有的内容之后
在此附上所有代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">


        /*
        为p中的第一个字设置样式
        */
        p:first-letter{
            color: red;
            font-size: 30px;
        }
        /*
        为p中的第一行设置一个样式
        */
        p:first-line{
            background-color: yellowgreen;
        }

        /*
        表示元素的最前面的位置
        一般before都要结合content样式一起使用
       通过content可以向before或after的位置添加一些内容
        */
    p:before{
            content: "xxxxxx";

        }
        p:after{
             content: "kkkkkkkkkkkkkkkkkk";
           
         }
    </style>
</head>
<body>

<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
</p>
</body>
</html>```