css中偽元素的使用方法小結（程式碼）-css教學-PHP中文網

css中偽元素的使用方法小結（程式碼）

不言

發布： 2018-08-24 11:55:08

原創

1359 人瀏覽過

這篇文章帶給大家的內容是關於css中偽元素的使用方法小結（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

<!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偽類，偽元素_html/css_WEB-ITnose

CSS偽類偽元素_html/css_WEB-ITnose

以上是css中偽元素的使用方法小結（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！