before css 旋转_CSS 巧用 before after 伪类

我们知道 ::before 和 ::after 是 CSS 中的伪类，它们基本功能是在 CSS 渲染中向元素的内容前面和后面插入内容。虽然在实际 HTML 中我们没有增加任何标签，并且会在浏览器中展现出来。

他们在实际的开发过程中我们使用的比较少，但是它的确有很巧妙的地方值得我们来开发：

动态在元素中添加字符串场景：当需要在列表、或者多处相同样式中增加一个不变的字符串时，我们可以使用它；

例如：产品列表，价格的展示前面都加上 ¥；

建议：注意场景，少使用；

代码：.price::before {    content: "¥"}

不改变元素尺寸的边框场景：在宽度为百分比的元素中，为此元素增加边框，此时会导致元素超过原有的百分比；

例如：导航条宽度为文档的 100% ，刚好撑满文档，但是需要在周围增加 1px 的边框，导致导航条宽度超过了浏览器宽度；

建议：中等程度使用，有替代方案；

代码：.meun {    width: 100%;    height: 80px;    position: relative;

}.menu::before {    content: ""

position: absolute;    left: 0;    border-left: 1px solid #ccc;

}.menu::after {    content: ""

position: absolute;    left: 0;    border-right: 1px solid #ccc;

}

0.5px 细边框

简单几何图形场景：很多简单的几何图形，我们可以通过它们只需要用一个样式就可以解决问题；

例如：带尖角的气泡对话框、筛选组件的下拉箭头；

建议：强烈推荐；

代码：.select::after {    content: "";    position: absolute;    top: 50%;    margin-top: -7px;    right: 10px;    display: inline-block;

border-left: 1px solid #000;

border-bottom: 1px solid #000;

width: 14px;

height: 14px;

transform: rotate(-45deg);

}

清除浮动场景：当一个元素在众多设置了浮动样式float: left的后面，但是又要另起一行时；

建议：强烈推荐；

代码：.container::before {

content: "";

display: table;

}

.container::after {

clear: both;

}

总结

利用 ::before ::after 伪类，动态的在元素开始和末尾增加标签这一特性，我们可以做出很多丰富的样式而且又减少了 DOM 的复杂度，当然它还有更多更丰富的用法等待着我们来挖掘。