当前位置: 首页 > 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的缺点…...

java8实战1(让方法参数具备行为能力)

客户需求是查出颜色为green的苹果 客户需求变成查出颜色为red的苹果 假设现在客户需求又变了,找出黄色的呢?你想查什么颜色直接做为参数输入 让调用者输入颜色参数 问题是现在客户想把重量做为条件,来筛选苹果集合 这就为难了,客户需求随时会变 观察以上例子,发现有个共同…...

C#(C Sharp)学习笔记_多态【十九】

前言 个人觉得多态在面向对象编程中还比较重要的&#xff0c;而且不容易理解。也是学了一个下午&#xff0c;才把笔记写得相对比较完善&#xff0c;但仍欠缺一些内容。慢慢来吧…… 什么是多态&#xff1f; 基本概念 在编程语言和类型论中&#xff0c;多态&#xff08;Poly…...

电子竞赛1——基于DDS的AM信号发生器

课题要求 产生AM调幅波&#xff1b; 要求&#xff1a;载波10K&#xff0c;被调制波1K&#xff1b; 短按键1&#xff08;pin_143&#xff09;改变该调幅波的调制度&#xff1a;25%、50%、75%&#xff1b; 长按按键1&#xff08;pin_143&#xff09;改变被调制信号频率&#…...

CentOS7的#!bash #!/bin/bash #!/bin/env bash #!/usr/bin/bash #!/usr/bin/env bash

bash脚本开头可写成 #!/bin/bash , #!/bin/env bash , #!/usr/bin/bash , #!/usr/bin/env bash #!/bin/bash , #!/usr/bin/bash#!/bin/env bash , #!/usr/bin/env bash CentOS7的 /bin 是 /usr/bin 的软链接, /sbin 是 /usr/sbin 的软链接, [root3050 ~]# ll /bin lrwxrwxrw…...

代码随想录第四十一天打卡

01背包问题 二维 代码随想录 视频讲解&#xff1a;带你学透0-1背包问题&#xff01;| 关于背包问题&#xff0c;你不清楚的地方&#xff0c;这里都讲了&#xff01;| 动态规划经典问题 | 数据结构与算法_哔哩哔哩_bilibili #include <iostream> #include <vector>…...

矩阵补全IGMC 学习笔记

目录 Inductive Graph-based Matrix Completion (IGMC) 模型 igmc推理示例&#xff1a; Inductive Graph-based Matrix Completion (IGMC) 模型 原版代码&#xff1a; IGMC/models.py at master muhanzhang/IGMC GitHub GNN推理示例 torch_geometric版本&#xff1a;tor…...

面试题之CSS

1. 引入样式的方式 外部样式 link import 区别 内部样式 /* 写在头部标签 */ <style></style>行内样式 2. 三行代码画三角形 .triangle{width:0px;border:100px solid;border-color:transparent transparent transparent red; }3.属性的继承 可继承的属性 …...

MFC扩展库BCGControlBar Pro v35.0新版亮点:重新设计的工具栏编辑器等

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了&#xff0c;这个版本改进类Visual Studio 2022的视觉主题、增强对多个…...

python调用SDK的问题

问题&#xff1a;Could not find module MvCameraControl.dll 原因&#xff1a;识别环境变量runtime异常 解决&#xff1a;指定具体绝对地址即可。MvCameraControl.dll的位置C:\Program Files (x86)\Common Files\MVS\Runtime\Win64_x64 MvCamCtrldll WinDLL("MvCamer…...

html入门综合练习

综合练习 通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。以下是几个综合练习项目的建议&#xff1a; 项目1&#xff1a;个人简历网页 创建一个包含以下内容的个人简历网页&#xff1a; 个人简介&#xff08;姓名、照片、联系方式&#xff09;教育背景工作经…...

少儿编程几岁开始学最好/广州seo

nohup 命令的功能是在不挂端的情况下执行命令&#xff0c;默认会输出一个 nohup.out 的文件。 用法&#xff1a; nohup COMMAND [ARG]... nohup OPTION 如果标准输入是终端&#xff0c;则将其从不可读的文件中重定向。 如果标准输出是终端&#xff0c;则尽可能将输出附加到…...

成都医疗seo整站优化/网络营销专业课程

关于结束的采购&#xff0c;以下说法都正确&#xff0c;除了&#xff1a;A、属于控制采购过程的输出B、结束的采购中不能再有未决索赔或发票C、项目管理团队可以在结束采购之后批准所有可交付成果D、结束采购中应该确认全部款项已经付清转载于:https://blog.51cto.com/13554215…...

建什么类型个人网站比较好/前端性能优化

工作中会经常遇到这样的业务问题&#xff1a;如果找到每个类别下用户点击最多的5个商品是什么&#xff1f;这类问题其实就是常见的&#xff1a;每组最大的N条记录(topN)。【题目】现有“成绩表”&#xff0c;记录了每个学生各科的成绩。表内容如下&#xff1a;问题&#xff1a;…...

汪清县 党风廉政建设网站/nba最新消息交易

高度之间的关系可以改写成一个递推式&#xff1a;Hi1 2Hi - Hi-1 2。Hn和Hi之间是正相关的。 思路见注释。&#xff08;一开始是那么想的&#xff0c;其实不用矩阵快速幂&#xff0c;二分H2也可以。 /********************************************************* * …...

购物网站功能/北京seo网络优化师

安装centos 7 系统之后要做的几件事#修改主机名 hostnamectl --static set-hostname xd-1vim /etc/hosts127.0.0.1 xd-1x.x.x.x xd-1#下面是使用iptables systemctl stop firewalld.service systemctl disable firewalld.service yum -y install iptables-servicesadduser www…...

兰州做网站公司哪家好/网站怎么推广出去

文章转载自&#xff1a;https://www.jianshu.com/p/c3c167e97bbd 常规的feign客户端接口定义 一般情况下&#xff0c;我们使用feign客户端调用其他服务时是这样定义的&#xff1a; FeignClient(name"xxx",fallbackxxx.class) public interface Hello(){ }这种方式…...