Home > Article > Web Front-end > How to achieve the sinking effect of initial letters in css
How to achieve the sinking effect of initial letters in css
- 王林Original
- 2020-11-20 11:45:193732browse
Css method to achieve the first letter sinking effect: This can be achieved by using the first-letter pseudo-class selector, such as [.contain p:first-letter{}]. The first-letter pseudo-class selector is used to specify the style of the first letter of the element.
You can achieve the drop-capital effect by using the first-letter pseudo-class selector of css.
(Learning video sharing: css video tutorial)
Related introduction:
: The first-letter selector is used to specify the first letter of the element style.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #FFFFFF;
color: #595959;
}
.contain {
width: 150px;
}
.contain p {
font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.contain p:first-letter {
font-size: 2em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}
.contain p:first-line {
color: red;
}
.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}
</style>
</head>
<body>
<div>
<p>This is a test article. This is a test article.</p>
<p>This is a test article. This is a test article.</p>
<p>这是一个测试</p>
</div>
</body>
</html>Achievement effect:
The above is the detailed content of How to achieve the sinking effect of initial letters in css. For more information, please follow other related articles on the PHP Chinese website!