当前位置: 首页 > news >正文

css中content属性你了解多少?

在CSS中,content属性通常与伪元素(如 ::before::after)一起使用,用于在元素的内容之前或之后插入生成的内容。这个属性不接受常规的HTML内容,而是接受一些特定的值,如字符串、属性值、计数器值等。

以下是一些关于content属性的基本用法和示例:

经常用的的案例:


插入字符串

你可以使用content属性插入任何字符串。

p::before {content: "Before content: ";
}p::after {content: " After content.";
}

在这个例子中,每个<p>元素之前都会插入文本"Before content: “,之后都会插入文本” After content."。

插入属性值

你可以使用attr()函数来插入元素的属性值。

a::after {content: " (" attr(href) ")";
}

在这个例子中,每个<a>元素之后都会插入一个括号,括号内是该元素的href属性值。

插入计数器值

你可以使用CSS计数器(counters)与content属性一起,在伪元素中插入递增的数字。

body {counter-reset: section;
}h1::before {counter-increment: section;content: "Section " counter(section) ": ";
}

在这个例子中,每当<h1>元素出现时,计数器section就会递增,并在<h1>元素之前插入文本"Section X: ",其中X是计数器的当前值。

插入URL

虽然content属性不能直接插入URL作为链接,但你可以使用JavaScript或其他方法来实现这一点。不过,你可以在content中插入URL作为纯文本。

a::after {content: " (Visit " url(http://example.com) " for more information)";
}

但请注意,这里的url()函数在这里实际上是将URL作为字符串插入,而不是创建一个链接。浏览器会将整个内容视为普通文本。

插入前后引号

使用属性content:open-quote,和 content:close-quote属性可以在元素的最前边和最后边分别插入引号

	<p class="p-2">这里是一段话<span>用span分开可以插入单引号</span><span>是因为在设置 open-quote的时候没有设置 close-quote</span>,就直接有设置一个 open-quote</p><style>.p-2::before{content: open-quote;}.p-2 span::before{content: open-quote;}.p-2 span::after{content: close-quote;}.p-2 span::after{content: close-quote;}.p-2::after{content: close-quote;}</style>

上边的代码是当设置了open-quote的情况下如果不设置close-quote就进行再次open-quote的话会插入不同于上次的引号,然后在设置close-quote的时候是闭合前一个,然后再设置close-quote会闭合第一个。

注意事项:

  • content属性仅与伪元素(如::before::after)一起使用。
  • content属性不能用于替换元素的实际内容。它只能用于在元素的内容之前或之后插入额外的内容。
  • content属性的值通常是静态的,不会随着页面的动态变化而更新(除非使用JavaScript或其他脚本语言)。

最后附上案例:

  • 新使用方法案例:https://jsrun.net/fyDKp/
  • 旧的使用技巧:https://jsrun.net/9XDKp

相关文章:

css中content属性你了解多少?

在CSS中&#xff0c;content属性通常与伪元素&#xff08;如 ::before 和 ::after&#xff09;一起使用&#xff0c;用于在元素的内容之前或之后插入生成的内容。这个属性不接受常规的HTML内容&#xff0c;而是接受一些特定的值&#xff0c;如字符串、属性值、计数器值等。 以…...

JVM-GC-G1垃圾回收器

JVM-GC-G1垃圾回收器 基本概念 card table card table概念是为了解决新生代对象进入老年代时&#xff0c;在进行新生代扫描的时候会遍历老年代对象的问题。将内存分为多个card,如果在一个老年代card中存在引用新生代对象的对象&#xff0c;则将该区域标记及为dirty card。 CS…...

【Ubuntu通用压力测试】Ubuntu16.04 CPU压力测试

使用 stress 对CPU进行压力测试 我也是一个ubuntu初学者&#xff0c;分享是Linux的优良美德。写的不好请大佬不要喷&#xff0c;多谢支持。 sudo apt-get update 日常先更新再安装东西不容易出错 sudo apt-get upgrade -y 继续升级一波 sudo apt-get install -y linux-tools…...

Artix Linux 默认不使用 systemd

开发者选择不使用systemd&#xff0c;而倾向于使用OpenRC或runit作为其初始化系统的原因。 哲学和设计原则&#xff1a;Systemd是一个功能丰富的初始化系统和系统管理器&#xff0c;它集成了许多功能&#xff0c;但这也导致它的设计哲学与一些用户或开发者的偏好不符。有些用户…...

JVM-GC-CMS垃圾回收器

JVM-CMS垃圾回收器 CMS垃圾回收的步骤 1. 初始标记&#xff08;InitialMarking&#xff09; 这是一个STW的过程&#xff0c;并行标记&#xff0c;只是标记GC Roots能直接关联到的对象。由于GC Root直接关联的对象少&#xff0c;因此STW时间比较短。 2. 并发标记 非STW的过程&…...

【玩转google云】实战:如何在GKE上使用Helm安装和配置3节点的RabbitMQ集群

需求 因项目需要需要在Google Kubernetes Engine (GKE) 中使用Helm安装一个3节点的RabbitMQ集群,配置用户名和密码,开通公网访问的Web管理界面,指定namespace为mq,并使用5G的硬盘存储MQ的数据。 前提条件 GKE集群:确保你有一个运行中的GKE集群。Helm工具:确保已安装Hel…...

【神经网络】深度神经网络

深度神经网络&#xff08;Deep Neural Network&#xff0c;简称DNN&#xff09;是一种模仿人脑神经网络结构和工作原理的机器学习模型。它通过层级化的特征学习和权重调节&#xff0c;能够实现复杂任务的高性能解决方案。深度神经网络由多个神经元层组成&#xff0c;每个神经元…...

机器学习算法 —— K近邻(KNN分类)

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 目录 KNN的介绍和应用KNN的介绍1) KNN建立过程2) 类别的判定KNN的优点KNN的缺点KNN的应用实战KNN分类数据集 —— KNN分类库函数导入数据导入模型训练&可视化原理简析莺尾花数据集 —— KNN分…...

Thinkphp5内核流浪猫流浪狗宠物领养平台H5源码

Thinkphp5内核流浪猫流浪狗宠物领养平台H5源码 可封装APP&#xff0c;适合做猫狗宠物类的发信息发布&#xff0c;当然懂的修改一下&#xff0c;做其他信息发布也是可以的。 Thinkphp5内核流浪猫流浪狗宠物领养平台H5源码...

c++ 智能指针使用注意事项及解决方案

c11智能指针 shared_ptr介绍注意事项示例解决方案 weak_ptr特点示例 unique_ptr特点示例 shared_ptr 介绍 shared_ptr 是一种智能指针&#xff0c;用于自动管理动态分配的对象的生命周期。它通过引用计数机制来确保当最后一个 shared_ptr 指向一个对象时&#xff0c;该对象会…...

SQLite Delete 语句

SQLite Delete 语句 SQLite 的 DELETE 语句用于从表中删除数据。它是 SQL 数据库管理中非常基础且重要的操作之一。在使用 DELETE 语句时,可以删除表中的特定行,也可以删除整个表的数据。本文将详细介绍 SQLite 中的 DELETE 语句,包括其语法、用法以及如何安全地执行删除操…...

vue3的基本使用方法

【 vue3实例 】 【 0 】对象、方法和属性 对象&#xff08;Object&#xff09;&#xff1a; 对象是编程中的一个数据结构&#xff0c;它可以包含多种数据类型&#xff0c;包括数字、字符串、布尔值、数组、其他对象等。对象通常由一系列属性和方法组成。在面向对象编程&…...

Java数据结构与算法(盛水的容器贪心算法)

前言 . - 力扣(LeetCode) 贪心算法(Greedy Algorithm)是一种在每一步选择中都采取当前状态下最优或最佳的选择,以期望通过一系列的局部最优选择达到全局最优解的算法。贪心算法的核心思想是贪心选择性质和最优子结构性质。 贪心算法的基本步骤 建立模型:将问题分解为一…...

MYSQL 数字(Aggregate)函数

目录 1、AVG() 2、MAX() 3、MIN() 4、SUM() 5、COUNT() 6、LIMIT() 1、AVG() 解释&#xff1a;返回数值列(字段)的平均值。 语法格式&#xff1a;SELECT AVG(column_name) FROM table_name 中文注释&#xff1a;select AVG(数值列/字段) from 表名 ; 用法&#xff1…...

【TensorFlow深度学习】如何处理不平衡数据集与欠采样、过采样技术

如何处理不平衡数据集与欠采样、过采样技术 如何处理不平衡数据集与欠采样、过采样技术:实现均衡学习的艺术1. 不平衡数据集的识别与评估2. 欠采样技术:减少多数类样本3. 过采样技术:增加少数类样本4. 集成采样策略:SMOTE +ENN 或 SMOTE +Tomek Links5. 评估与选择最佳策略…...

【考研数学】如何保证进度不掉队?暑假强化保姆级规划

数一125学长前来解答&#xff01;一句话&#xff0c;跟对老师&#xff0c;抓基础&#xff0c;有计划的进行复习才是关键&#xff01; 数学基础非常重要&#xff0c;包括高等数学、线性代数和概率论等基础知识点。要确保对这些基础知识有扎实的掌握。 按照教材的顺序&#xff…...

Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法

Vue3【二十一】Vue 路由模式&#xff08;createWebHashHistory /createWebHistory &#xff09;和RouterLink写法 Vue3【二十一】Vue 路由模式和普通组件目录结构 createWebHistory history模式&#xff1a;url不带#号&#xff0c;需要后端做url适配 适合销售项目 利于seo crea…...

【交易策略】#22-24 残差资金流强度因子

【交易策略】#22-24 残差资金流强度因子...

CentOS 7.9检测硬盘坏区、实物定位(三)

系列文章目录 CentOS 7.9上创建JBOD&#xff08;一&#xff09; CentOS 7.9上创建的JBOD阵列恢复&#xff08;二&#xff09; 文章目录 系列文章目录前言一、在系统中找到硬盘对应的盘符二、使用命令定位实物1.badblocks检测坏块2.对2T以上的硬盘检测&#xff08;对本篇非必要…...

redis持久化方式—RDB

RDB快照 与AOF记录写操作命令不同&#xff0c;RDB直接记录内存中的二进制数据&#xff0c;reids恢复数据时&#xff0c;直接将RDB文件加载到内存中就可以了&#xff0c;听起来是不是RDB完虐AOF&#xff1f;那么看完本文&#xff0c;会让你的态度转变&#xff0c;因为RDB的缺点…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...