css实现文本右下角展示查看更多

最新推荐文章于 2023-06-13 16:33:00 发布

冰中何人知

最新推荐文章于 2023-06-13 16:33:00 发布

阅读量4.3k

点赞数 2

分类专栏： js小效果文章标签： css vue.js

本文链接：https://blog.csdn.net/weixin_44167314/article/details/105250186

版权

本文介绍了如何使用CSS在文本右下角添加‘查看更多’的提示，通过before/after伪类实现。内容包括实现效果的示例和代码展示。

摘要由CSDN通过智能技术生成

css实现文本右下角展示查看更多

效果图：
查看更多点击前的图片
点击查看更多之后
实现原理：
通过before/after伪类实现，第一行展示before的内容，第二行展示after，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
	<style type="text/css">
		.words{
            max-height: 40px;
            color: #666;
            font-size: 14px;
            position: relative;
        }
        .box{
            color: #fff;
        }
        .box::before, .box::after{
            content: attr(content);