为了账号安全,请及时绑定邮箱和手机立即绑定

CSS 巧用 before after 伪类

2019.04.26 12:54 1690浏览

我们知道 ::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 细边框

参考:如何制作 0.5 像素的细线

简单几何图形

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

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

  • 建议:强烈推荐;

  • 代码:

.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 的复杂度,当然它还有更多更丰富的用法等待着我们来挖掘。




点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消