详解CSS中的伪元素

news2024/10/3 16:09:40

4.3 伪元素

可以把样式应用到文档树中根本不存在的元素上。

::first-line 文本中的第一行

::first-letter 文本中的第一个字母

::after 元素之后添加

::before 元素之前

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p::first-line {
            background-color: red;
        }

        p::first-letter {
            color: blue;
            font-weight: 600;
        }

        h1::before {
            content: "我是h1前面的添加的内容";
            color: chocolate;
        }

        p::after {
            content: "我是P后面的内容";
            color: brown;
        }
    </style>
</head>
<body>
    <h1>|WWF's Mission Statement</h1>
    <p>To stop the degradation of the
        planet's natural environment
        and to build a future in which
        humans live in harmony with nature,
        by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is
        sustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>

小结:UI元素状态,:selection冷门生僻,不学习。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2186503.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

netty之Netty传输Java对象

前言 Netty在实际应用级开发中&#xff0c;有时候某些特定场景下会需要使用Java对象类型进行传输&#xff0c;但是如果使用Java本身序列化进行传输&#xff0c;那么对性能的损耗比较大。为此我们需要借助protostuff-core的工具包将对象以二进制形式传输并做编码解码处理。与直接…

无线物联网通信与智能家居

无线物联网通信技术与智能家居之间存在着密不可分的关系。无线物联网通信技术作为智能家居系统的核心支撑&#xff0c;为智能家居设备之间的互联互通提供了可能&#xff0c;从而实现了家居生活的智能化、便捷化和舒适化。 一、无线物联网通信技术在智能家居中的应用 1、传感器…

LabVIEW程序员从幼稚到成熟的标志是什么?

LabVIEW程序员从“幼稚”到“成熟”的转变标志主要体现在以下几个方面&#xff1a; 1. 系统性思维与架构设计 初学者通常会注重功能实现&#xff0c;常常直接编写功能模块&#xff0c;而忽略系统整体的架构设计。成熟的LabVIEW程序员则具备系统性思维&#xff0c;在开始编写代…

Ericsson EPSFB 通话掉话现象优化案例

Ericsson EPSFB 通话掉话现象优化案例 在移动通信网络中&#xff0c;用户体验的稳定性和通话质量至关重要。随着通信语言通话技术的发展&#xff0c;部分用户在通话时会遇到掉话现象&#xff0c;尤其是在采用EPSFB&#xff08;EvolvedPacket>System Fallback&#xff09;技术…

【WRF工具】cmip6-to-wrfinterm工具概述:生成WRF中间文件

cmip6-to-wrfinterm工具概述 cmip6-to-wrfinterm工具安装cmip6-to-wrfinterm工具使用快速启动&#xff08;Quick start&#xff09;情景1&#xff1a;MPI-ESM-1-2-HR&#xff08;默认&#xff09;&#xff1a;情景2&#xff1a;BCMM情景3&#xff1a;EC-Earth3 更改使用&#x…

SpringBoot框架下美容院管理系统的设计与实现

第二章 开发环境 对美容院管理系统进行开发&#xff0c;需要了解开发技术的理论与实际运用&#xff0c;对开发工具&#xff0c;尤其是数据库的使用方法需要进行掌握。 2.1 SpringBoot框架 SpringBoot框架的诞生是出于需要优化Spring框架的前提下&#xff0c;Spring框架随着时间…

【Simulink仿真】电池储能系统(BESS)与太阳能电站的SPS微电网模型

摘要 本文介绍了一个基于电池储能系统&#xff08;BESS&#xff09;与太阳能电站的微电网仿真模型。该模型使用SPS&#xff08;特殊保护系统&#xff09;进行模拟&#xff0c;能够在跟随电网和形成电网的两种模式下运行。微电网通过太阳能电站为主要能源&#xff0c;并结合了1…

ROS2功能包、节点、可执行程序是怎么来的、之间的关系是什么?详解!

在一个简单的ros2工作空间中&#xff0c;一般有一下几个文件夹&#xff0c; 1、src 2、install 3、build 4、log 其中&#xff0c;存放功能包项目的文件夹在src中&#xff0c;一般情况下&#xff0c;当我们要创建一个功能包项目的时候&#xff0c;要在src文件夹下输入以下…

安卓真机调试“no target device found“以及“ INSTALL_FAILED_USER_RESTRICTED“两个问题的解决办法

目录 1 no target device found问题解决办法 2 “INSTALL_FAILED_USER_RESTRICTED”解决办法 使用android studio 2023.2.1.23windows版本。手机为小米K70 Pro 1 no target device found问题解决办法 参考小米手机如何开启usb调试功能&#xff1f; (baidu.com) 1 联接手机…

PTT 实验

1. 实验网络拓扑 kali: 192.168.72.128win2008: 192.168.135.129 192.168.72.139win7: 192.168.72.149win2012:(DC) 192.168.72.131 2. EXPLOIT 一般来说&#xff0c;通用的ptt有三种方法&#xff1a; impacketmimikatzcs 这里就以impacket为例。 0x1. 黄金票据 前提条件…

【SpringBoot详细教程】-09-Redis详细教程以及SpringBoot整合Redis【持续更新】

🌲 Redis 简介 🌾 什么是Redis Redis 是C语言开发的一个开源高性能键值对的内存数据库,可以用来做数据库、缓存、消息中间件等场景,是一种NoSQL(not-only sql,非关系型数据库)的数据库 Redis是互联网技术领域使用最为广泛的存储中间件,它是「Remote DictionaryServic…

FP7209: 用于紫外线消毒灯的 升压LED恒流驱动芯片

现在社会对于居家消毒也越发重视起来。而居家消毒除了75%浓度酒精及各类消毒液外&#xff0c;利用紫外线灯给衣物表面、房间消毒也是一种很好的选择。FP7209 定位于低压线性恒流驱动&#xff0c;精度高、外围电路简单、使用方便且可靠性高&#xff0c;更可广泛应用于商业照明系…

【大数据入门 | Hive】函数{单行函数,集合函数,炸裂函数,窗口函数}

1. 函数简介&#xff1a; Hive会将常用的逻辑封装成函数给用户进行使用&#xff0c;类似于Java中的函数。 好处&#xff1a;避免用户反复写逻辑&#xff0c;可以直接拿来使用。 重点&#xff1a;用户需要知道函数叫什么&#xff0c;能做什么。 Hive提供了大量的内置函数&am…

深度学习-19-深入理解并训练自己的Tokenizer分词器

文章目录 1 tokenization是什么2 Tokenization方法简介2.1 单词级的Tokenization2.2 子词Tokenization技术2.3 举例说明2.3.1 字符级别2.3.2 词语级别2.3.3 子词级别3 训练自己的Tokenizer3.1 下载数据集3.2 huggingface的Tokenizer实现3.3 my-tokenizer.json字段说明3.4 验证一…

猫猫cpu的缓存

原题过长&#xff0c;放一下题目大意 题目大意 给你 m m m 个 1 1 1 到 n n n 之间的整数&#xff0c;你要找到若干个大小为固定的 k k k 的闭区间&#xff0c;使得所有这些数都在你找到的某个区间内。你需要最小化这些区间的并集的大小&#xff0c;并输出此大小。本题里…

[RabbitMQ] Spring Boot整合RabbitMQ

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

【AI驱动TDSQL-C Serverless 数据库技术实战营】基于Langchain的电商可视化分析

人工智能技术的飞速发展已深刻影响电商行业&#xff0c;显著提升了个性化推荐、用户行为分析、库存管理和市场预测等领域的效率。构建一个高效的AI驱动电商数据分析平台已成为行业的核心需求。本文里&#xff0c;我们将使用腾讯云的高性能应用平台 HAI&#xff08;专为AI和科学…

物流行业中的AI平台架构与智能化应用

随着物流行业的迅速发展&#xff0c;尤其是电商、仓储、运输的需求日益增多&#xff0c;AI技术逐渐成为推动物流企业高效运营、提升服务水平的关键力量。AI平台架构为物流行业的各个环节提供了智能化解决方案&#xff0c;助力物流企业在仓储管理、运输调度、客户服务等方面实现…

netty之基于Netty搭建WebSocket,模仿微信聊天页面

前言 模仿微信聊天页面&#xff0c;开发一个基于Netty搭建WebSocket通信案例。Netty的应用方面非常广&#xff1b;聊天、MQ、RPC、数据等等&#xff0c;在5G到来的时候更加需要大量数据传输&#xff0c;Netty的应用也会更加广阔。 1:案例使用SpringBootNettyWebSocket搭建功能。…

c++MFC项目结构中有:外部依赖项、头文件,他们两个有啥区别,好像都是.h文件吧?

目录 头文件&#xff08;Header Files&#xff09; 特点 示例 外部依赖项&#xff08;External Dependencies&#xff09; 特点 示例 区别 作用和来源不同 内容不同 使用方式不同 结合 示例 总结 在C项目结构中&#xff0c;外部依赖项和头文件确实可能都包含.h文件…