::after ::before 中伪类的使用以及注意点

引子

为何会写这么一个博客，当然是有些地方值得注意和思索的，为了良好的使用并弄清::after ::before的原理，当然碰到过此类问题而有所迷惘。
老样子，直接上码。

<a href="#" >我是知道的</a>

渲染出来的是 ::after ::before 中伪类的使用以及注意点
然而，伪类 ::after 是什么样子的呢，它为谁定义样式呢？这个就跟我们很早之前就提出过的概念即元素和样式分离，即使css样式表失效了，那么我们的描述html的部分还是能正常显示，只不过是不美了，js就是能够眨眼的部分（手动微笑），好了，这个跟我们的伪类又有什么关系呢，确实有关。
请看下面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test：)</title>
<style>
a:before{
content:'你的脸';
background-color:red;
}
	</style>
</head>
<body>

<a href="#">我是知道的</a>

</body>
</html>

渲染出的页面如下
::after ::before 中伪类的使用以及注意点
可以看出红色部分仅仅只渲染了你的脸，而后面的内容我是知道的都没有变化，这跟样式分离又扯什么鬼。
那么我修改一下，content:" ";

a:before{
content:'';
background-color:red;
}

::after ::before 中伪类的使用以及注意点
这样的意思就是说，<a 里面的内容是不受 background-color:red;影响，并且content: ""为空的情况，没有匹配到相应的元素，只好无效。
同理，a:after 也是一样的道理。

一前一后，同理content内容为空的情况下，都不起作用，你会经常发现清除浮动用了伪类。然而在很多地方都会用到伪类，比如动画。我也是刚刚初学者，讲的不好的地方还望大家多多包涵。
伪类的知识点就到这里了，具体怎么使用相信大家比我更清晰的。
完！

::after ::before 中伪类的使用以及注意点

引子

相关推荐