css案例-after伪类元素的例子

下位三角例子

 https://www.zhuji66.com/how-to-connect-ubuntu-use-rdp-on-windows/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <div>

    </div>
</body>

</html>

<style>
    div {
        width: 200px;
        height: 20px;
        border: 1px solid;
        position: relative;
        transition: all .5s linear;
    }

    div::after {
        position: absolute;
        top: 2px;
        right: 10px;
        content: '';
        width: 10px;
        height: 10px;
        border-bottom: 1px solid red;
        display: block;
        transform: rotate(45deg);

        border-right: 1px solid red;
    }

    div:hover::after {
        transform: rotate(225deg);
        top: 8px
    }
</style>

 

posted on 2023-07-25 22:34  码农-编程小子  阅读(18)  评论(0)  编辑  收藏  举报