CSS偽元素

偽元素

偽元素 用于在元素的內容前后或特定部分插入虛擬元素,并為其添加樣式,無需修改 HTML 結構

語法:使用雙冒號 ::(現代規范)

以下是一些常見的CSS偽元素的示例:
1.::before : 在元素內容的前插入虛擬元素。
2.::after : 在元素內容的后插入虛擬元素。
3.::first-line : 選擇元素的第一行文本。
4.::first-letter : 選擇元素的首字母。
5. ::selection: 設置用戶選中文本的樣式
6.::placeholder : 設置輸入框占位符文本的樣式

偽元素的一些簡單示例:
清除浮動

.clearfix::after {content: "";display: block;clear: both;
}

自定義列表符號

ul li::before {content: "?";color: red;margin-right: 8px;
}

偽元素在HTML頁面使用實例:

<!DOCTYPE html>
<html>
<head><title>CSS偽元素示例</title><style>/* 在元素的內容前插入新內容并設置樣式 */h1::before {content: "-> ";  color: blue;}/* 在元素的內容后插入新內容并設置樣式 */p::after {content: " (end)";color: red;}/* 選擇元素的第一行文本并設置樣式 */p::first-line {color: green;font-weight: bold;}/* 選擇元素的第一個字母并設置樣式 */p::first-letter {font-size: 24px;color: orange;}</style>
</head>
<body><h1>Title</h1><p>This is a paragraph of text. </p>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/77287.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/77287.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/77287.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

easyexcel使用模板填充excel坑點總結

1.單層map設置值是{屬性}&#xff0c;那使用兩層map進行設置值&#xff0c;是不是可以使用{屬性.屬性}&#xff0c;以為取出map里字段只用{屬性}就可以設置值&#xff0c;那再加個.就可以從里邊map取出對應屬性&#xff0c;沒有兩層map寫法 填充得到的文件打開報錯 was empty (…

在Ubuntu服務器上部署xinference

一、拉取鏡像 docker pull xprobe/xinference:latest二、啟動容器&#xff08;GPU&#xff09; docker run -d --name xinference -e XINFERENCE_MODEL_SRCmodelscope -p 9997:9997 --gpus all xprobe/xinference:latest xinference-local -H 0.0.0.0 # 啟動一個新的Docker容…

三周年創作紀念日

文章目錄 回顧與收獲三年收獲的五個維度未來的展望致謝與呼喚 親愛的社區朋友們&#xff0c;大家好&#xff01; 今天是 2025 年 4 月 14 日&#xff0c;距離我在 2022 年 4 月 14 日發布第一篇技術博客《SonarQube 部署》整整 1,095 天。在這條創作之路上&#xff0c;我既感慨…

Redis——五種數據類型

目錄 前言 1.String 1.1RAW編碼 1.2EMBSTR編碼 1.3 INT編碼 2.List 3.Set 3.1 InSet編碼轉化成Dict編碼 4.ZSet 4.1結合SkipList和HT實現 4.2使用ZipList實現 4.3編碼轉換 4.4 ZipList排序功能 5.Hash 5.1Hash底層存儲結構 6.Redis數據結構和數據類型關系圖 前言…

zookeeper啟動報錯have small server identifier

解決方案&#xff1a; 1、查看myid是否有重復 2、查看server.X 與myid的X是否一致 3、啟動順序為myid從小到大的服務器順序

#Linux動態大小裁剪以及包大小變大排查思路

1 動態庫裁剪 庫分為動態庫和靜態庫&#xff0c;動態庫是在程序運行時才加載&#xff0c;靜態庫是在編譯時就加載到程序中。動態庫的大小通常比靜態庫小&#xff0c;因為動態庫只包含了程序需要的函數和數據&#xff0c;而靜態庫則包含了所有的函數和數據。靜態庫可以理解為引入…

消息隊列生產者投遞的高可靠性與一致性保障方案

在構建高可靠分布式系統時&#xff0c;確保業務數據庫與消息隊列&#xff08;MQ&#xff09;之間的一致性是一項核心挑戰。尤其當使用 Kafka 作為消息隊列中間件時&#xff0c;如何避免“數據庫寫入成功&#xff0c;但消息發送失敗”或“消息重復發送”等問題&#xff0c;成為系…

Formality:Bug記錄

相關閱讀 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 本文記錄博主在使用Synopsys的形式驗證工具Formality中遇到的一個Bug。 Bug復現 情況一 // 例1 module dff (input clk, input d_in, output d_out …

通信算法之267 : DJI無人機 云哨 DroneID 640ms

DJI 無人機 與DroneID 轉 *** 載 0x01 摘要 消費級無人機可以用于高級航拍、物流和人道主義救援等等。但是其廣泛使用給安全、安保和隱私帶來了許多風險。例如&#xff0c;攻擊方可能會使用無人機進行監視、運輸非法物品&#xff0c;或通過侵入機場上方的封閉空域造成經濟損…

論壇測試報告

作者前言 &#x1f382; ??????&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ?&#x1f382; 作者介紹&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

npx 的作用以及延伸知識(.bin目錄,npm run xx 執行)

文章目錄 前言原理解析1. npx 的作用2. 為什么會有 node_modules/.bin/lerna3. npx 的查找順序4. 執行流程總結1&#xff1a; 1. .bin 機制什么是 node_modules/.bin&#xff1f;例子 2. npx 的底層實現npx 是如何工作的&#xff1f;為什么推薦用 npx&#xff1f;npx 的特殊能力…

【c語言】深入理解指針3——回調函數

一、回調函數 回調函數&#xff1a;通過函數指針調用的函數. 當把一個函數的地址傳遞給另一個函數&#xff0c;通過該地址去調用其指向的函數&#xff0c;那么這個被調用的函數就是回調函數. 示例&#xff1a; 在【深入理解指針2】中結尾寫了用函數指針實現計算器的功能&#…

HTTP 核心概念

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家&#xff0c;歷代文學網&#xff08;PC端可以訪問&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移動端可微信小程序搜索“歷代文學”&#xff09;總架構師&#xff0c;15年工作經驗&#xff0c;…

VidBot:從野外 2D 人體視頻中學習可泛化的 3D 動作,實現零樣本機器人操控

25年3月來自慕尼黑工大、瑞士 ETH 和微軟的論文“VidBot: Learning Generalizable 3D Actions from In-the-Wild 2D Human Videos for Zero-Shot Robotic Manipulation”。 未來的機器人被設想為能夠執行各種家務的多功能系統。最大的問題仍然是&#xff0c;如何在盡量減少機器…

Linux 日常運維命令大全

Linux 作為一種開源操作系統&#xff0c;在服務器運維中扮演著重要角色。掌握常用的 Linux 命令對于運維人員而言至關重要。本文將整理一份 Linux 服務器運維常用命令大全&#xff0c;幫助你在日常工作中提高效率和準確性。 1. 基礎命令 基礎命令是Linux操作的起點&#xff0…

編程規范之枚舉

編程規范之枚舉 1.1 初始化枚舉項 枚舉平時用的也沒有很頻繁&#xff0c;今天看代碼規范提到枚舉類型初始化枚舉項。并對初始化枚舉項進行了歸納。包括下面三個 不進行顯示初始化&#xff0c;交由編譯器完成。 對第一個枚舉項的顯式初始化&#xff0c;這樣可以強制整數值的…

《軟件設計師》復習筆記(12.1)——范圍管理、進度管理

目錄 一、范圍管理 1. 核心概念 2. 范圍管理過程 WBS&#xff08;工作分解結構&#xff09;示例 真題示例&#xff1a; 二、進度管理 1. 核心過程 2. 關鍵工具與技術 真題示例&#xff1a; 一、范圍管理 1. 核心概念 項目范圍&#xff1a;為交付產品必須完成的工作…

過去十年前端框架演變與技術驅動因素剖析

一、技術演進脈絡&#xff08;2013-2023&#xff09; 2013-2015&#xff1a;結構化需求催生框架雛形 早期的jQuery雖然解決了跨瀏覽器兼容性問題&#xff08;如IE8兼容性處理&#xff09;&#xff0c;但其松散的代碼組織方式難以支撐復雜應用開發。Backbone.js的出現首次引入M…

中華傳承-醫山命相卜-梅花易數

梅花易數 靈活起卦&#xff08;如數字、聲音、外應等&#xff09;和象數結合&#xff0c;準確率可達96.8%。其起卦方式擺脫傳統龜殼、蓍草的繁瑣&#xff0c;強調直覺與靈活性。 個人決策、事件預測等 尤其在短期、具體問題上表現突出。

如何用Brower Use WebUI實現網頁數據智能抓取與分析?

作者&#xff1a;算力魔方創始人/英特爾創新大使劉力 Browser-use是一款能讓AI智能體像人類一樣操作網頁的創新工具&#xff0c;與傳統網絡爬蟲技術相比&#xff0c;Browser-use能模擬人瀏覽并操作網頁&#xff0c;在采集網站數據時&#xff0c;不會被網站反爬機制識別和封禁&…