::after和::before的使用

本文介绍了一种使用CSS的::after伪元素解决在文本每个词后添加斜杠(除最后一个词外)的技术方案。通过巧妙地利用CSS选择器,可以实现在不借助JavaScript的情况下达到预期效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天遇到个小问题

要实现一个 每一个词后面加上 “/”但是最后一个字段不加的需求

但是按照平时的思维只能实现成这样

最后面的地方一定会有 “/”的出现,如果不用js,纯css就难以实现需求

不过办法总是会有滴!就是要运用到 ::after和::before 的知识点了


惯例上w3c的解释


::after-定义和用法

::after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

::before-定义和用法

::before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。


::after 和 ::before 他们两个都是伪元素,为了和伪类元素区分,写法最好写成双冒号 :: ,作用都差不多:一个是在元素后面加内容,一个是在元素前面加内容,

.aaa::after{
    content: '/';
}
.aaa:last-child::after{
content: '';
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值