css伪元素:before和:after

最新推荐文章于 2024-07-11 21:11:19 发布

万事胜意sy

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量171

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/109566215

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

**css伪元素:before和:after这个两个伪元素在真正页面元素内部之前和之后添加新内容伪元素:
before和:after添加的内容默认是inline元素；

这个两个伪元素的content属性，表示伪元素的内容,

设置:before和:after时必须设置其content属性，否则伪元素就不起作用**

在这里插入图片描述

#one{
    margin-left:40%;
    margin-top: 100px;
    width: 350px;
    height: 250px;
    background: url("img/76edddd3461d644438df4daa5e3ae78.png");
    background-size: 100% 100%;
}
#one::before{
    display: inline-block;/*默认是inline级 不能设置宽高，要变成inline-block才能设置宽高*/
    content: '';
    width: 100%;
    height: 100%;
    background-color: grey;
    opacity: 0.5;
    display: none;
   
}
#one:hover::before {
    display:inline-block;
}
#two{
    width: 350px;
    height: 250px;
    background:pink;
    opacity: 1;

}
#two::after{
    display: inline-block;
    content: '我是美女';
    border: 2px solid black;
    width: 50px;
    height: 50px;
    opacity: 1;
}
#three{
    position: relative;
width: 100px;
height: 30px;
border: 1px solid black
}
#three::before{
    content: '';
    position: absolute;
    top: 7px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    transform: rotate(315deg);
}
</style></head><body><div id="one">

</div> 
<div id="two">

</div> 
<div id="three">

</div> </body>

在这里插入图片描述