/* 年月日时分秒格式 */
.date {
font-size: 16px;
color: #333;
font-weight: bold;
display: block;
margin: 10px 0;
}
.date::before {
content: "";
display: inline-block;
width: 3px; /* 垂直线的宽度 */
height: 10px;
background-color: #333; /* 垂直线的颜色 */
margin-right: 5px;
margin-left: -10px;
}
.date span {
display: inline-block;
margin-right: 10px; /* 数字之间的间距 */
}
.date span:first-of-type {
margin-left: -5px; /* 调整第一个数字的位置 */
}
/* html代码 */
<p class="date"><span>2022</span>年<span>03</span>月<span>26</span>日<span>14</span>:<span>30</span>:<span>50</span></p>以上是展示年月日时分秒的格式，如果需要展示部分时间信息，可以参考以下例子。
/* 年月格式 */
.year-month {
font-size: 16px;
color: #333;
font-weight: bold;
display: block;
margin: 10px 0;
}
.year-month::before {
content: "";
display: inline-block;
width: 3px;
height: 10px;
background-color: #333;
margin-right: 5px;
margin-left: -10px;
}
.year-month span {
display: inline-block;
margin-right: 10px;
}
.year-month span:first-of-type {
margin-left: -5px;
}
/* html代码 */
<p class="year-month"><span>2022</span>年<span>03</span>月</p>/* 月日格式 */
.month-day {
font-size: 16px;
color: #333;
font-weight: bold;
display: block;
margin: 10px 0;
}
.month-day::before {
content: "";
display: inline-block;
width: 3px;
height: 10px;
background-color: #333;
margin-right: 5px;
margin-left: -10px;
}
.month-day span {
display: inline-block;
margin-right: 10px;
}
.month-day span:first-of-type {
margin-left: -5px;
}
/* html代码 */
<p class="month-day"><span>03</span>月<span>26</span>日</p>以上是常用的几种展示年月日格式的方式，可以根据实际需求进行选择。