16.伪元素

最新推荐文章于 2024-07-11 21:11:19 发布

Keeling1720

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量126

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113957232

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

     伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  		伪元素使用::开头
     	  ::first-letter  表示第一个字母
          ::first-line    表示第一行
          ::selection     表示选中的内容
          ::before        元素的开始
          ::after         元素的最后
              - before和after必须结合content属性来使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
</head>
    <style>
        /**
            伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
	        伪元素使用：：开头
	            ::first-letter  表示第一个字母
	            ::first-line    表示第一行
	            ::selection     表示选中的内容
	            ::before        元素的开始
	            ::after         元素的最后
	                - before和after必须结合content属性来使用
         */
        /*p元素的首字母大写*/
        p::first-letter{
            font-size: 50px;
        }
        /*p元素的第一行显示蓝色*/
        p::first-line{
            background: blue;
        }
        /*鼠标选中区域变红色*/
        p::selection{
            color: red;
        }
        /* div元素的最前面加上50px大小的· */
        div::before{
            content: '·';
            font-size: 50px;
        }

        /*div元素的末尾加上--------*/
        div::after{
            content: '--------';
            background-color: aqua;
        }
    </style>
<body>
    <div>Hello, How are you?</div>
    <div>I'm fine,Thanks!</div>
    <p>President Clinton’s decision on Apr.8 to send Chinese Premier Zhu Rongji packing without an agreement on China’s entry into the World Trade Organization seemed to be a massive miscalculation. The President took a drubbing from much of the press, which had breathlessly reported that a deal was in the bag. The Cabinet and Whit House still appeared divided, and business leaders were characterized as furious over the lost opportunity. Zhu charged that Clinton lacked “the courage” to reach an accord. And when Clinton later telephoned the angry Zhu to pledge a renewed effort at negotiations, the gesture was widely portrayed as a flip-flop.</p>
    <p>我是第二个p元素哦</p>
</body>
</html>