CSS3 after和before伪类

最新推荐文章于 2021-11-07 17:00:18 发布

BlueSky_x

最新推荐文章于 2021-11-07 17:00:18 发布

阅读量416

点赞数

分类专栏： css3 文章标签： html

本文链接：https://blog.csdn.net/XuHang666/article/details/93723801

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

伪元素：

再dom生成前或生成后创建一个虚假的元素，插入到目标元素。

插入内容的特点

插入的内容在页面的源码里是不可见的。只能在css里可见

1. :after 选择器在被选元素的内容后面插入内容。

2. :before 选择器在被选元素的内容前面插入内容。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
        body{background-color:#ebebeb}
        div.outer{
        	width:400px;
            height:250px;
            padding:5px;
            margin:100px auto;
            position:relative;
        }
        div.child{
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color:#fff;
            color:#000;
            line-height:250px;
            font-family:'Microsoft YaHei';
            text-align:center;
            z-index:2
        }
        
        div.outer::before,div.outer::after{content:'';
            z-index:1;
            width:50%;
            height:3px;
            position:absolute;
            left:10px;
            bottom:7px;
            background-color:transparent;
            box-shadow:5px 5px 10px rgba(0,0,0,0.5);
            -webkit-transform:rotate(-90deg);
 
        }
        div.outer::after{
            left:auto;
            right:10px;
            background-color: #7CFC00;
            -webkit-transform:rotate(90deg)
        }
    </style>
	</head>
	<body>
		<div class=" outer">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

效果如下：

BlueSky_x

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 after和before伪类

伪元素：再dom生成前或生成后创建一个虚假的元素，插入到目标元素。插入内容的特点插入的内容在页面的源码里是不可见的。只能在css里可见1. :after 选择器在被选元素的内容后面插入内容。2.:before 选择器在被选元素的内容前面插入内容。示例：<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫