为了实现css特效，从认识:before 和 :after开始！

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

安康全是山

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

阅读量537

点赞数

分类专栏： Css样式技巧

本文链接：https://blog.csdn.net/k912120/article/details/84533388

版权

Css样式技巧专栏收录该内容

11 篇文章 0 订阅

订阅专栏

开始之前有有一个知识点需要知道：“：before”和“:: before”的区别

单冒号（:)伪类，

双冒号（：:)伪元素

1.使用方法如下

:before 选择器向选定的元素前插入内容。 :after选择器向选定的元素后插入内容。
使用 content 属性来指定要插入的内容。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
	<style>
		p:before{
			content:"人生自古谁无死，";
		}
		
		h2:after{
			content:"朝如青丝暮成雪。";
		}
	</style>
<body>

<p>留取丹心照汗青。</p>

<h2>君不见高堂明镜悲白发，</h2>

</body>
</html>

结果：