CSS 伪类应用

基本应用：

伪元素多用于修饰。如实现以下列表
Java / JavaScript / PHP / C++

<ul>
	<li>Java</li>
	<li>JavaScript</li>
	<li>PHP</li>
	<li>C++</li>
</ul>

li{
	display: inline-block;
}
/*除去最后一个*/
li:not(:last-child)::after{
	content: "/"
}

这样就不必为了一个 “/” 多加一个li。

::before && ::after 实现画画X号

<div class="close"></div>
	
	.close{
		position: reletive;
		width: 50px;
		height: 50px;
	}

	.close::before{
		position: absolute;
		content: '';
		width: 2px;
		height: 30px;
		background-color: black;
		transform: rotate(45deg);
	}
	.close::after{
		position: absolute;
		content: ' ';
		width: 2px;
		height:30px;
		background-color: black;
		transform: rotate(-45deg);
	}

由于伪元素默认为inline，设置不了宽高，两种解决：

1. 给close类设置定位，给两个伪元素设置绝对定位，脱离了文本流就可以设置宽高了。
2. 设置inline-block即可。