コンテナの長さよりも短いボーダーを実装する必要がある場合、これまではほとんどの人が div ネストを使用していました。この効果を実現するには疑似クラスを使用するだけで済み、非常に便利です。この記事では、CSS 疑似クラスを使用して境界線の長さを制御する方法を紹介します。興味のある友人は、見てください。
序文:
図に示すように: コンテナの長さよりも短いボーダーを実装する必要がある場合、これまではほとんどの人が div ネストを使用していました。この効果を実現するには疑似クラスを使用するだけで済み、非常に便利に使用できるようになりました。
ここに書かれているのは WeChat アプレットなので、ラベルは となりview
、html と競合しません。
html:
1 2 3 4 |
< view class = "swiper-tab" > < view class = "swiper-tab-item {
{currentTab=='1'?'active':''}}" data-current = "1" bindtap = "clickTab" >安全帽监控</ view > < view class = "swiper-tab-item {
{currentTab=='2'?'active':''}}" data-current = "2" bindtap = "clickTab" >危险区域监控</ view > </ view > |
css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.swiper-tab {
width : 100% ; font-family : PingFangSC-Medium; font-size : 28 rpx; border-bottom : 2 rpx solid #F1F1F1 ; text-align : center ; height : 88 rpx; line-height : 88 rpx; display : flex; flex-flow: row; justify- content : space-between; background : #ffffff } .swiper-tab-item {
width : 50% ; color : #252627 } .active {
color : #4876F9 ; font-weight : bold ; position : relative ; } |
上記はページの基本的なスタイルですが、境界線の長さを制御したい場合は、:after
疑似クラス CSS を使用する必要があります。
1 2 3 4 5 6 7 8 9 10 |
.active:after {
content : '' ; position : absolute ; bottom : 0 ; height : 6 rpx; width : 100 rpx; background-color : #4876F9 ; left : 50% ; transform: translateX( -50% ); } |
最後の 2 つの文は、境界線の中央揃えの制御に関するものです。