CSS伪元素用法

最新推荐文章于 2023-06-30 15:46:34 发布

mariner_zp

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量195

点赞数

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_41174502/article/details/105086124

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是伪元素？
CSS的伪元素用来添加一些选择器的特殊效果。之所以被称为伪元素是因为它们不是真正的页面元素。html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用css样式，表面上看貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。伪元素是两个冒号::
常用的伪元素有哪些？
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素
::after 创建一个伪元素，其将成为匹配选中元素的最后一个子元素
::first-line 选中元素内容的第一行
::first-letter 选中元素内容的第一个字母
示例代码：

<style>
		div{
			width: 300px;
			height: 300px;
			background-color: lightblue;
		}
		div::before{
			content: "before伪元素";/*content必写，用于激活伪元素*/
			color: coral;
		}
		div::after{
			content: "after伪元素";/*content必写，用于激活伪元素*/
			color: coral;
		}
		div::first-letter{
			color: red;
			font-size: 20px;
		}
		div::first-line{
			font-weight: 800;
		}
	</style>
</head>
<body>
	<div class="box1">永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。
		群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以
		为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情.是日也，天
		朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。 
	</div>
</body>

结果：

注意：
伪元素不会影响结构选择器，无法通过其他选择器选中。
伪元素的content样式用于在元素的::before和::after伪元素中插入内容，必写！！！用于激活伪元素。否则伪元素失效。
content样式值种类：
none不会产生伪元素 normal：效果同none 文本内容：展示字符内容 url()：指定一个外部资源如图片等。

跳动的心：

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
            position: relative;
            animation: move 1s infinite alternate-reverse;
        }
        @keyframes move{
            0%{
                transform: rotateZ(-45deg) scale(0.5);
            }
            100%{
                transform: rotateZ(-45deg) scale(1);
            }
        }
        div::before,div::after{
            width: 100px;
            height: 100px;
            content: "";
            display: block;
            border-radius: 50%;
            background-color:red;
            position: absolute;
        }
        div::before{
            top:-50px;
        }
        div::after{
            right: -50px;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>