合理借助CSS伪元素:before与:after实现页面辅助设计 CSS伪元素实例应用技巧

这篇文章发布于

DeathGhost 编辑, 归类于 css » 当前评论 0 条。

CSS伪元素用于向某些选择器设置特殊效果,我们在实例项目中常常会使用它对其页面辅助设计,避免不相干(无用)的标签元素布局,进而使得代码结构清晰明了,同时达到自己想要的视觉效果。

关于CSS伪元素中的:before与:after使用,想必大家在实例项目中多多少少都会用到;以前也写过这篇文章,服务器更换了,以前的数据也扔弃了,在这里重新对其作以笔记。

CSS 伪元素我们往往会应用到布局设计结构中,对某标签元素进行特殊效果处理,以满足我们的设计需求;我们在写布局结构过程中往往会简化html的元素布局嵌套,使其更优,以便后续修改、其他人阅读或机器阅读。

:before与:after实现页面辅助设计 CSS伪元素实例应用技巧
:before与:after实现页面辅助设计 CSS伪元素实例应用技巧

我们以"递增"方式对其实例介绍:

基础应用,我们对段落首位添加特殊字符、图标或图片

<p class="demo_01">CSS伪元素</p>
.demo_01:before{content:"·";margin:0 5px;}
结果浏览器输出:· CSS伪元素

尾部也是一样,我们对其段落尾部添加"..."省略,整体样式及输出如下:

.demo_01:before{content:"·";margin:0 5px;}
.demo_01:after{content:"...";margin:0 5px;}
结果浏览器输出:· CSS伪元素 ...

图标、图标也是同样道理,我们只需要css对其:before进行修饰(设置宽高比,设置背景图片,设置定位等等),对于现在图标字体,我们可以将其编码输入e.g.:'\e601'一般。

:before与:after伪元素经常会配合伪类进行设计操作

使用场景:顶部横向导航栏,导航间通过border隔开,最后一个取消border,同时当前页面导航下方border样式显示

最终效果:home | list | about 样式结构。

<nav>
    <ul>
        <li class="active">home</li>
        <li>list</li>
        <li>about</li>
    </ul>
</nav>
nav ul{display:flex;flex-direction:row;}
nav ul li{position:relative;border-right:1px grey solid;flex:auto;text-align:center;}
nav ul li:last-of-type{border:none;}
nav ul li.active:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:grey;}

CSS伪元素:before与:after对表单元素的设计操作

使用场景:默认页面的表单元素radio(单选)与checkbox(复选)不够美观,我们想通过图标字体(iconfont)对其美化处理,这里用emoji(音标:/ɪˈmoʊdʒi/)代替iconfont

...
<label>
    <input type="radio" name="sex" value=""/>
    <span>Male</span>
</label>
<label>
    <input type="radio" name="sex" value=""/>
    <span>Female</span>
</label>
...
label{display:inline-block;margin-right:5px;}
label:last-of-type{margin-right:0;}
label input[type="radio"]{display:none;}
label span{margin-right:5px;}
label span:before{content:"\26aa";}
label input[type="radio"]:checked   span:before{content:"\26ab";}

操作中,先隐藏原input radio,再给span一个默认的样式图标,最后结合CSS3中的属性选择对设置选中后的图示,最终结果:

<!--初始状态:未选中-->
⚪ Male  ⚪ Female
<!--已选中-->
⚫ Male  ⚪ Female

同样方法,复选框也是一样,这样我们也就不需要通过js进行控制。

列表样式排序,数字递增效果,如同ol-li有序排列设计操作

使用场景,取消ol li的默认列表样式,需要对其列表序号进行美化装饰

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>angular</li>
</ol>
ol{margin:0;padding:0;list-style-type: none;counter-reset:sectioncounter;}
ol li:before{content:counter(sectioncounter) "、";counter-increment:sectioncounter;}

显示结果:

1、html
2、css
3、javascript
4、angular

如果我们相对第一个做进一步处理,我们可以借助CSS伪类对其样式设计,这里就不再示例了。

其他的类似通过CSS画几何图形(形状),也可以运用此方法,这个下次另启一片文章对其总结。

这篇文章很简单,相信很多人也都会使用,主要是我们在实例项目中,得灵活借助对其页面布局排版设计,进而优化页面代码减少不必要的元素布局;当然了,还有很多效果可以使用此类方法,大家在使用过程中结合CSS相关对其进一步处理;注意结合实际项目需求,因为中间有些是动态的,因需求而议。


CSS CSS伪元素 CSS选择器效果 CSS伪元素技巧 CSS应用 CSS实例技巧

下一篇: