.navbar { box-sizing: border-box; line-height: 34px; height: 34px; font-size: 13px; white-space: nowrap; flex: none; } .view.common{ color: dimgray; text-align: center; display: inline-block; height: 34px; line-height: 34px; } .view.nav { box-sizing: border-box; border-bottom: 2px solid transparent; transition: all 0.26s ease; } .view.nav.active{ color: #0080f0; font-size: 15px; font-weight: bold; border-bottom: 2px solid #0080f0; } .view.plain{ transition: all 0.26s ease; } .view.plain.active{ color: #0080f0; font-size: 15px; font-weight: bold; } .view.cap{ border-radius: 36px; background: #dfdfdf; padding: 0 14px; height: 28px; line-height: 28px; margin: 3px 0; } .view.cap.active{ background: #00a0f0; color: white; } .view.line{ position: relative; } .text.line{ display: flex; justify-content: center; transition: all 0.26s ease; } .text.line.active{ font-size: 15px; color: #00b0f0; font-weight: bold; } .text.line::after{ transition: all 0.26s ease; width: 0px; height: 3.2px; position: absolute; content: ""; bottom: 0; border-radius: 10px; } .text.line.active::after{ width: 22px; background: #00a0f0; }