前端应用_css_hover和before after 应用实例讲解

最新推荐文章于 2024-07-20 17:11:20 发布

上海_彭彭

最新推荐文章于 2024-07-20 17:11:20 发布

阅读量606

点赞数

分类专栏： css 文章标签： css hover css before after

本文链接：https://blog.csdn.net/qq_34979346/article/details/97388815

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

hover 是伪类选择器，当光标悬浮的时候，触发的动作。
before 和after 是对元素额外的添加东西，一个是前，一个在后边。
直接看示例就能明白了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    body{margin:0px;
    }

     .box{width:800px;
     border:1px solid #333;
     height:300px;
     margin:200px 200px;
     text-align:center;
}

     .box a{
     background-color:gold;
     width:60px;
     border:1px solid #333;
     height:50px;
     margin-left:0px ;
     margin-top:30px;
     padding-left:0;
     display: inline-block;
     }
     .box a:hover{
     color:red;
     background-color:green;
     }
     .box:before{
     content:"额外 before"
     }
      .box:after{
     content:"额外 after"
     }




</style>
</head>
<body>

<div class="box">
    <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>

</div>
<div  class="box2">
这个是div 的块元素
</div>

</body>
</html>