css3 伪类伪元素使用技巧

最新推荐文章于 2025-04-06 19:02:52 发布

原创最新推荐文章于 2025-04-06 19:02:52 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何利用CSS3的伪元素::before和::after进行创意设计，包括实现按钮的悬停效果及创建多种图标样式。通过具体的代码示例展示了如何仅用CSS就能制作出美观实用的界面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.之前学习过css3的伪元素::before和::after，可以做很多事情。一个是可以做一些css3图标，功能异常强大；另外是可以配合:hover做一些按钮效果（参考https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-21）。
2.对于伪类需要注意常用伪类的使用顺序，参见之前的文章，关于伪类与伪元素的配合使用：

<style type="text/css">
div::after,div::before{
    opacity: 0;
    -webkit-transition:opacity 0.3s;
    transition:opacity 0.3s;
}
div::before{
    margin-right: 10px;
    content: '[';
}
div::after{
    margin-left: 10px;
    content: ']';
}
div:hover::after,div:hover::before{
opacity: 1;
}
    </style>
</head>
<body>
<div>cool</div>
</body>

效果是hover div 会出现前后括号；
3.css图标制作：

<div id="wraper">
    <div id="power"></div>
    <div id="play"></div>
    <div id="unknow"></div>
    <div id="arrow-right"></div>
<style type="text/css">
    *{
        margin: 0;padding: 0;
    }
    p{
        font-size: 150px;
        font-family: Arial;
        text-align: center;
    }
    #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
    #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
    #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
    #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}  
    #unknow{ width: 30px;height:30px;margin: 20px; border: 6px solid #EEB422; border-radius:50%; display: inline-block;position: relative; background-color:#EEB422;   }
    #unknow:before{  border:11px solid transparent ;border-right: 13px solid #fff; content: ""; position: absolute; left:-5px; top: 4px;}

    #up{ width: 30px;height: 30px; margin: 20px; position: fixed; right: 20px; bottom: 20px; border: 5px solid #4F4F4F;border-radius: 7px;background-color:#4F4F4F; }
    #up:before{ border:12px solid transparent ;border-bottom: 9px solid #CDC1C5; content: ""; position: fixed; right: 48px; bottom: 57px;}
    #up:hover{background-color:#1C1C1C; border-color: #1C1C1C; }
    #up:after{border:12px solid transparent ;border-bottom: 9px solid #CDC1C5; content: ""; position: fixed; right: 48px; bottom: 61px;}
    #arrow-right{width: 30px;height:30px;margin: 20px; border: 6px solid #EEB422; border-radius:8px; display: inline-block;position: relative; background-color:#EEB422; }
    #arrow-right:before{content: "";border:10px solid transparent;border-left:13px solid #EEB422;position: absolute;left:36px;top:5px;}
</style>

最后效果：