How does CSS achieve a drop-off effect?
May 29, 2021 Article blog
When we develop web pages, if we are involved in the development of text paragraphs, we need to set some special styles on the text to enhance the aesthetics of the web page and enhance the user experience. So today's w3cschool combo teaches you how CSS can sink the initials.
The effect is achieved
Realize the idea
The
first-child
selector is used to select the first child element that belongs to its parent element, then the
::first-letter
element is used to select the first word of a piece of text, then the first word size is set using
font-size
color
font color is set, and finally the element float is defined with
float
property, away from the standard output stream of the original page.
The specific code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首字下沉 - 编程狮(w3cschool.cn)</title>
<style>
p:first-child::first-letter{
color: #c69c6d;
font-size: 2em;
float:left;
margin: 0 .2em 0 0;
}
</style>
</head>
<body>
<p>
编程狮-w3cschool。随时随地学编程！w3cschool主要为初学者技术的人员提供在线学习教程和日常技术资料查询服务。为了能更好的服务用户，网站平台中提供了大量的在线实例，通过实例，可以更好地学习如何建站。并且会根据当前互联网的变化实时更新内容。
</p>
</body>
</html>That's how CSS achieves the drop effect of the first word? t he whole content. For learning more about CSS content, follow w3cschool.com.
Related CSS effects: How CSS sets picture rotation, and how CSS achieves shadow effects