CSS偽元素

阿新 • • 發佈：2019-01-12

把文字的第一個字母設為特殊的字母

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			p:first-letter {
				color:#ff0000;
				font-size:xx-large;
			}
		</style>
	</head>
	<body>
		<p>你可以使用"first-letter"偽元素向文字的首字母設定特殊樣式；</p>
	</body>
</html>

把第一行文字設定為特殊

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			p:first-letter {
				color:#ff0000;
				font-size:xx-large;
			}
		</style>
	</head>
	<body>
		<p>你可以使用"first-letter"偽元素向文字的首字母設定特殊樣式；</p>
	</body>
</html>

把第一行文字的第一個字母設定為特殊

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			p:first-letter{
				color:#ff0000;
				font-size:xx-large;
			}
			p:first-line {
				color:#0000ff;
				font-variant:small-caps;
			}
		</style>
	</head>
	<body>
		<p>你可以結合使用"first-line"和"first-letter"偽元素向文字的首行和首字母設定特殊樣式。</p>
	</body>
</html>

使用：在一個元素之前插入一些內容

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			h1:before {content:url(smiley.gif);}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The :before pseudo-element inserts content before an element.</p>
		<h1>This is a heading</h1>
		<p><b>注意:</b>僅當 !DOCTYPE 已經宣告 IE8 支援這個內容屬性</p>
	</body>
</html>

使用：在一個元素之後插入一些內容

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			h1:after {content:url(smiley.gif);}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The :before pseudo-element inserts content before an element.</p>
		<h1>This is a heading</h1>
		<p><b>注意:</b>僅當 !DOCTYPE 已經宣告 IE8 支援這個內容屬性</p>
	</body>
</html>

css 偽元素選擇器

for 選擇浮動 before 結合 fir 元素選擇器 amp div 　/*設置第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px;

JS控制CSS偽元素的方法（下）

宣告：這個系列文章的下篇轉載自部落格園，以下是原文標題及連結 js如何控制css偽元素內容（before，after） http://www.cnblogs.com/yunkou/p/4269974.html?utm_source=tuicool&utm_medium=refer

JS控制CSS偽元素的方法（上）

宣告：此方法由bumfod 同學提供【HTML部分】 <!DOCTYPE html> <title>CSS</title> <article>The seller can, under Business L

CSS偽元素:before/CSS偽元素:before/:after content 顯示Font Awesome字型圖示:after content 顯示Font Awesome字型圖示

HTML <a href="javascript:volid(0);"><i class="icon-table"></i>表格</a> CSS input[type="radio"]:checked + label:before {

css偽元素實現圖片水平垂直居中

通常，我們在開發頁面的時候，遇到固定圖片大小的情況較為常見，但是，也有某種特殊情況，那就是在固定大小的父元素中，顯示大小不固定且寬高都不會超過父元素大小的圖片，下面我們直接看程式碼。 <!DOCTYPE html> <html lang="en"> <h

css偽元素 ::after ::before

我遇到的問題: 　　　div盒子標籤設定了偽元素 ::after ::before 並給這倆content內容設定了空屬性，添加了背景圖，發現這兩個偽元素沒有寬度和高度。解決方法　　　給設定偽元素的盒子的父級盒子新增position:relative;widt

使用css偽元素，模擬html中的title屬性

在html中， title屬性的作用是顯示額外的資訊，當滑鼠移動到元素上時，這些提示資訊就會顯示出來。然後，title屬性的缺點也很明顯，一是原始樣式太醜，一是滑鼠移動到元素上之後，需要等待一段時間才會顯示；因此，我們可以使用偽類來解決這兩個問題。實現步驟：一、首先h

html css偽元素選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

CSS偽元素選擇器:before與:after

　　在css標籤中有這樣子的標籤div:before、div:after，對於before、after來說有部分人是相當陌生的，那麼這兩個標籤是什麼呢？有什麼用處？　　:befor、:after是CSS的偽元素，用CSS手冊可以查詢到其基本的用法：

CSS偽元素，偽類選擇器

偽類選擇器是CSS中已經定義好了的選擇器，不能誰便取名，常用的味蕾選擇器是使用在a元素上的幾種，如a:link a:visited a：hover a:active 偽元素選擇器斌不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的偽元素使用的選擇器，CSS中

CSS-偽元素選擇器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素選擇器</title> <style>

CSS偽元素選擇器

偽元素選擇器 < !–隱藏標籤–> 每個標籤都有開始：before 結束：after <p> <before> </before> < !--預設加--> p1 <after> </after

css 偽元素偽類使用萬能清除浮動 ..

css 偽元素即插入的虛偽元素像:before :after 插入元素 css 偽類就是操作class 樣式利用偽元素清除浮動 ps 利用偽元素插入的dom

::before和::after的用法 css偽元素

CSS 有兩個說不上常用的偽類 :before 和 :after，偶爾會被人用來新增些自定義格式什麼的，但是它們的功用不僅於此。前幾天發現了 Creative Link Effects 這個非常有意思的介紹創意連結特效的頁面，裡面驚人的效果大量使用到的特性除了 trans

CSS偽元素

把文字的第一個字母設為特殊的字母 <!DOCTYPE html > <html> <head> <meta charset="utf-8">

【JQ】jQuery改變css偽元素樣式

偽元素是什麼？例如 :bofore、:after偽元素不是dom，不能直接操作。若有以下html和css，通過操作偽元素改變圖示顏色：<div class = "table-container"> <span class="glyphicon gl

基於CSS偽元素邊框的小三角形

效果圖: 程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title>

CSS 屬性 - 偽類和偽元素的區別

習慣 div 個人觀點養成 pseudo line 現象 let first 先說一種我們寫CSS時候常見的現象，::before和:after中雙冒號和單冒號會在寫CSS中經常看到。為什麽會有單冒號跟雙冒號兩種寫法呢？其實主要是為了區分偽類和偽元素偽類：偽類用於

CSS 偽類與偽元素

www [ ] 選擇 sad 第一個一次進行 clas before CSS的元素選擇器除了根據id（#）、class（.）、屬性（[ ]）選取元素以外，還有很重要的一類，就是根據元素的特殊狀態來選取元素。它們就是偽類和偽元素。跟id選擇器、類選擇器、屬性選擇器以及派生

CSS的偽元素和偽類

冒號 blog :focus 邏輯 select over 字段 .html sel css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類—— :hover, :active, :visited, :focus。常見偽元素——::first-letter,::f

CSS偽元素

相關推薦