css:文字中间加上“|”的效果
CSS 效果 文字 中间 加上
2023-09-27 14:27:10 时间
效果
代码
<div class="care-circle">
<p>关爱圈</p>
<p>
<em>20</em>
<span>获得的赞</span>
<i></i>
<em>245</em>
<span>收到的评论</span>
</p>
</div>
.care-circle {
display: flex;
align-items: center;
width: 6.9rem;
height: 0.56rem;
font-size: 0.24rem;
background-color: rgba(0, 59, 137, 0.03);
border-radius: 0.28rem;
position: relative;
}
p:nth-of-type(2) {
display: flex;
align-items: center;
position: absolute;
right: 0.21rem;
color: #999999;
em {
color: #34b2da;
margin-right: 0.1rem;
}
i {
width: 0.02rem;
height: 0.35rem;
border-left: 1px solid #d8d8d8;
margin: 0 0.1rem;
}
}
相关文章
- CSS动画实例:Loading加载动画效果(二)
- CSS渐变之CSS3 gradient在Firefox3.6下的使用
- css - font-size
- node开发自动刷新网页中的css和javascript
- 37 CSS样式中的动画效果
- 不可思议的纯CSS导航栏下划线跟随效果
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
- uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序
- CSS - 鼠标移入图片放大及缓慢过渡效果(仅 “内部“ 放大,不改变容器大小)鼠标移入图片变成发大镜效果
- CSS - 呼吸灯效果动画(淡隐淡出效果)
- css 设置div半透明 悬浮在页面底部 不随滚动条滚动
- 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
- 《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.3 使用浏览器浏览HTML文件
- css效果之吸顶效果
- 使用纯CSS实现带箭头的提示框
- css引入第三方字体
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
- 浅析CSS中clip-path属性的使用和不同形状的绘制及如何使用纯CSS实现六边形的图片效果
- CSS实现四种loading动画效果
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
- Vue使用第三方库实现动画效果:animate.css使用方法和教程案例
- CSS:实现动态流光线条效果/动态流光线条颜色渐变效果