How to realize the first letter of a paragraph and enlarge the special effect of the first word in CSS
Editor to share with you CSS how to achieve the first letter of a paragraph, the first word to enlarge the special effects, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
The enlargement of the first letter of a paragraph refers to the enlargement of the letters or Chinese characters at the beginning of the paragraph, mainly using css's first-letter pseudo-class selector.
Zoom in on a single line:
The code is as follows:
Document
Body {
Background-color: # FFFFFF
Color: # 595959
}
.contain {
Width: 150px
}
.contain p {
Font: 80% Helvetica 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
}
This is a test article. This is a test article.
This is a test article. This is a test article.
This is a test.
Note: first-letter supports IE7+,first-line supports IE8+
Multiline magnification:
The effect is as follows:
Copy the code
The code is as follows:
Document
* {
Margin:0
Padding:0
}
Body {
Font-size:12px
Font-family: Tahoma, Geneva, sans-serif
Padding:200px
}
P {
Width:150px
Color:#000
Font-size:1em
Margin-bottom: 20px
}
P:first-letter {
Float: left
Font-size:2.5em
Padding-right:5px
Text-transform:uppercase
}
P:first-line {
Color:#f00
}
This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
The above is all the content of the article "how to achieve the first letter of a paragraph in CSS, enlarge the special effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
