CSS伪类与伪元素：hover、active、before、after

本文主要讲解CSS中常用的伪类和伪元素的用法，包括hover、active、before、after等细节用法，并附有相应的代码案例。

CSS伪类

CSS中的伪类指的是在某些特定的状态下，选择器所匹配的元素的样式，常用的伪类有：

:hover

:hover伪类用于鼠标悬停在元素上时改变元素的样式，常用于链接、按钮等元素：

a:hover {
  color: red;
}

:active

:active伪类用于鼠标按下时改变元素的样式，常用于按钮等元素：

button:active {
  background-color: yellow;
}

CSS伪元素

CSS中的伪元素指的是在某些特定的位置上，选择器所匹配的元素的样式，常用的伪元素有：

::before

::before伪元素可以在元素的内容前面插入一个内容，常用于一些特殊的装饰效果：

h3::before {
  content: "#";
  margin-right: 5px;
}

::after

::after伪元素可以在元素的内容后面插入一个内容，常用于一些特殊的装饰效果：

p::after {
  content: " - The End";
}

以上就是CSS中常用的伪类和伪元素的用法，希望对大家有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS字体图标：使用方法、自定义图标字体
• 下一篇： CSS响应式设计：媒体查询、断点、自适应布局