移动端开发常用样式备忘录

一块西瓜皮啦

已于 2024-08-20 15:20:56 修改

阅读量216

点赞数 3

分类专栏：前端文章标签：小程序微信小程序 scss

于 2024-08-10 09:49:07 首次发布

本文链接：https://blog.csdn.net/weixin_44431073/article/details/141086372

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、说明

这是记录开发过程中常用的样式记录的帖子，后续会不断更新，也欢迎大家优化，添加

二、内容

1、标题前面带竖线的样式

示例：

.title {
	color: #1677ff;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	margin: 10px;
}

.title::before {
	content: "";
	display: block;
	height: 16px;
	width: 2px;
	margin-right: 5px;
	background: #1677ff;
}

2、标题底部带横线---20240820 更新

.checked {
    height: 100%;
    position: relative;
}

.checked::after {
    content: '';
    position: absolute;
    left: 40%;
    bottom: -3px;
    width: 50%;
    height: 0.03rem;
    background-color: #5897FF;
    transform: translateX(-50%);
    border-radius: 5px;
}