before css 旋转-ag凯发k8国际

前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问题了，只是有些许较陌生，但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。

什么是:before和:after？ 该如何使用他们？

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

下面我们先跑个简单的代码测试下效果：

}p:after{content:"d"/*:before和:after必带技能，重要性为满5颗星*/

}

ello worl

以上的代码将会在页面中展现的是"hello world"。我们通过浏览器的"审查元素"看到的内容是：

::before

"ello worl"

::after

p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"h"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。作为一只合格的程序猴子，捍卫"hello world"的完整存在是必要的。

既然笔记主要针对是:before和:after，那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

1.结合border写个对话框的样式。

本兽将上面这句话拆成2部分：结合border，写个对话框的样式。

既然是结合border，那么我们先转个小话题，简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要)：

总结

以上是ag凯发k8国际为你收集整理的before css 旋转_css 巧用 :before和:after的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。