Home > Web Front-end > CSS Tutorial > Summary of how to use pseudo elements in css (code)

Summary of how to use pseudo elements in css (code)

不言
Release: 2018-08-24 11:55:08
Original
1393 people have browsed it

This article brings you a summary (code) of how to use pseudo elements in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Set the first letter of the text to a special letter

<!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>
Copy after login
Copy after login

Set the first line of text to a special letter

<!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>
Copy after login
Copy after login

Set the first letter of the first line of text to special

<!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>
Copy after login

Use: Insert some content before an element

<!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>
Copy after login

Usage: Insert some content after an element

<!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>
Copy after login

Related recommendations:

css pseudo-class, pseudo-element_html/css_WEB-ITnose

CSS pseudo-class pseudo-element_html/css_WEB-ITnose

The above is the detailed content of Summary of how to use pseudo elements in css (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template