DeathGhost

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

这篇文章发布于2018年08月18日 14:28 星期六。 阅读 30 次 ,由 DeathGhost 编辑,归类于css »

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

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

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

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

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

<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相关对其进一步处理;注意结合实际项目需求,因为中间有些是动态的,因需求而议。

DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕