一个marquee标签的多个a的单行显示

本文介绍了一种在marquee标签内的多个a标签间添加间距的方法,通过使用CSS伪元素::after并设置特定样式,实现了单行显示时各链接间的美观间隔。

今天碰到一个需求,在一个marquee标签的多个a标签单行显示,相互之间要隔开。

像是这样

<marquee id="marquee">
    <a href="http://www.baidu.com">沙罗沙罗- 智能制造系统解决方案</a>
    <a href="http://www.jd.com">巴拉巴拉- 智能制造系统解决方案</a>
  </marquee>

找了好多资料,都没有合适的解决办法。所以,自己写了个简单实现:

只需要在css设置伪类 ::after即可解决:

#marquee a::after{
  content: "marqueenblank";
  display: inline;
  visibility: hidden;
}

看下效果:

还可以,就这样,see u

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值