How to achieve the drop cap effect in css? Pseudo element + floating effect (code example)-CSS Tutorial-php.cn

How to achieve the drop cap effect in css? Pseudo element + floating effect (code example)

青灯夜游

Release： 2019-07-06 11:35:08

Original

5228 people have browsed it

There is a drop cap function in the word document, which can be used in the layout of the article. Sometimes it can add a lot of color to the article. So can CSS achieve such an effect? This article will introduce to you how CSS achieves the drop cap effect, so that you can understand how to use CSS pseudo elements to float to achieve the drop cap effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In CSS, the drop cap effect can be achieved through the pseudo element::first-letter. The implementation principle is very simple, that is, set the font-size value of the first character to a larger value, and then use float to implement it.

Let’s take a look at how CSS achieves the drop cap effect through a simple code example.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Copy after login

Rendering:

How to achieve the drop cap effect in css? Pseudo element + floating effect (code example)

In the above example, the first word of all paragraphs is dropped. If you only need to achieve the effect of the first word of a certain paragraph, , which also needs to be implemented with other selectors. Here we take a look at the implementation of the drop cap in the first paragraph:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p:first-child::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Copy after login

Rendering:

How to achieve the drop cap effect in css? Pseudo element + floating effect (code example)

Summary: The above is the entire content of this article , I hope it can be helpful to everyone’s study. For more related tutorials, please visit CSS Basics Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

Web design video tutorial

The above is the detailed content of How to achieve the drop cap effect in css? Pseudo element + floating effect (code example). For more information, please follow other related articles on the PHP Chinese website!