純CSS如何實(shí)現(xiàn)選中商品后右下角顯示√號(hào)功能

發(fā)布時(shí)間：2021-03-18 10:12:31 來源：億速云閱讀：469 作者：小新欄目：web開發(fā)

小編給大家分享一下純CSS如何實(shí)現(xiàn)選中商品后右下角顯示√號(hào)功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css偽類右下角點(diǎn)擊出現(xiàn) 對(duì)號(hào)角標(biāo)表示選中的示例代碼：

效果

解析：

1、利用偽元素選擇器，來增加內(nèi)容。
2、利用較寬的border實(shí)現(xiàn)√號(hào)的背景效果
3、利用透明border去掉多余背景色。
4、利用子絕父相定位，將√號(hào)定位到合適位置。

css代碼：

 &.selected{
              color: @theme;
              border: 0.02rem solid @theme;
              position: relative;
              transition: all 0.5s ease;
            }
            &.selected::after {
              content: '?';
              display: block;
              height: 0px;
              width: 0px;
              position: absolute;
              bottom: 0;
              right: 0;
              color:#fff;
              /**對(duì)號(hào)大小*/
              font-size: 10px;
              line-height: 8px;
              border: 10px solid;
              border-color: transparent #4884ff #4884ff transparent;
            }

看完了這篇文章，相信你對(duì)“純CSS如何實(shí)現(xiàn)選中商品后右下角顯示√號(hào)功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

純CSS如何實(shí)現(xiàn)選中商品后右下角顯示√號(hào)功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽