CSS伪元素（以:after为例）插入图片

看一眼效果图，我们要实现一个多行文本溢出显示省略号的展开（用图片代替）收起效果<div class="wrapper"><input id="exp1" class="exp"type="checkbox"><div class="text"><label class="btn" for="exp1"></label>浮动元素是如何定位的

程序猿的散文诗

11122人浏览 · 2021-07-02 16:12:13

程序猿的散文诗 · 2021-07-02 16:12:13 发布

看一眼效果图，我们要实现一个多行文本溢出显示省略号的展开（用图片代替）收起效果
在这里插入图片描述

<div class="wrapper">
			  <input id="exp1" class="exp"  type="checkbox">
			        <div class="text">
			            <label class="btn" for="exp1"></label>
						浮动元素是如何定位的
							正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
			        </div>
	</div>

	.btn::after{
	  content:'';
	  display: block;
	  width: 15px;
	  height: 15px;
	  // background-image无法引用本地资源，故需要用网络地址
	  background-image: url('./arrow.jpg');
	  background-size: 100% 100%;
	  margin-top:4px;
	}

完整代码请参考：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>h5</title>
	<style>
		.wrapper {
	  display: flex;
	  margin: 50px auto;
	 /* width: 800px;*/
	  overflow: hidden;
	/*   resize: horizontal; */
	  border-radius: 8px;
	  padding: 15px ;
	  box-shadow: 20px 20px 60px #bebebe,
	    -20px -20px 60px #ffffff;
	}
	.text {
	  font-size: 20px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  text-align: justify;
	  /* display: flex; */
	/*   display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical; */
	  position: relative;
	  line-height: 1.5;
	  max-height: 4.5em;
	  transition: .3s max-height;
	}
	.text::before {
	  content: '';
	  height: calc(100% - 26px);
	  float: right;
	}
	.text::after {
	  content: '';
	  width: 999vw;
	  height: 999vw;
	  position: absolute;
	  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
	    margin-left: -100px;
	}
	.btn{
	  position: relative;
	  float: right;
	  clear: both;
	  margin-left: 20px;
	  font-size: 16px;
	  padding: 0 8px;
	  /*background: #3F51B5;*/
	  line-height: 24px;
	  border-radius: 4px;
	  color:  #fff;
	  cursor: pointer;
	  /* margin-top: -30px; */
	}
	.btn::after{
	  content:'';
	  display: block;
	  width: 15px;
	  height: 15px;
	  background-image: url('./arrow.jpg');
	  background-size: 100% 100%;
	  margin-top:4px;
	}
	.exp{
	  display: none;
	}
	.exp:checked+.text{
	  max-height: none;
	}
	.exp:checked+.text::after{
	  visibility: hidden;
	}
	.exp:checked+.text .btn::before{
	  visibility: hidden;
	}
	.exp:checked+.text .btn::after{
	  content:'收起';
	  color: #000;
	  display: initial;
	  background-image: url('');
	}
	.btn::before{
	  content: '...';
	  position: absolute;
	  left: -5px;
	  color: #333;
	  transform: translateX(-100%)
	}
	</style>
</head>
<body>
	<div class="wrapper">
			  <input id="exp1" class="exp"  type="checkbox">
			        <div class="text">
			            <label class="btn" for="exp1"></label>
						浮动元素是如何定位的
							正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
						在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
			        </div>
			    </div>
</body>
</html>