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

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

<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>

CSS伪元素（以:after为例）插入图片相关推荐

CSS——伪元素:before画圆、插入图片
1.&:before画圆 <template><div><div class="title">今日新增量</div >< ...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
css 伪元素和浮动
展示为行内元素 inline-block <style>div {/* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离, 展示为行内元素 */display: i ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
css伪元素选择器，first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等代码如下: p:firs ...
P17-前端基础-CSS伪元素选择器
P17-前端基础-CSS伪元素选择器 1.概述伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置) 伪元素使用 :: 开头 ::first-letter 表示第一个字母 -::first- ...
css嵌入样式元素,css伪元素怎么用在内嵌样式？
css伪元素可以直接在内嵌样式中使用,使用语法为:<style>选择器:pseudo-element{属性名:属性值;}</style>.然后直接通过选择器即可使用伪元素. 伪 ...
CSS 伪元素和伪类
CSS 伪元素用于设置元素指定部分的样式. ::first-line伪元素用于向文本的首行添加特殊样式. 注意:::first-line 伪元素只能应用于块级元素. 以下属性适用于 ::first-l ...
css中什么是伪元素,CSS伪元素是什么？
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...
css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...

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

CSS伪元素（以:after为例）插入图片相关推荐

最新文章

热门文章