Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > How to use the pseudo element first-letter to capitalize the first letter of text

How to use the pseudo element first-letter to capitalize the first letter of text

php中世界最好的语言
Release： 2018-03-09 13:47:02
Original
2656 people have browsed it

This time I will show you how to use the pseudo-element first-letter to capitalize the first letter of text, and how to use the pseudo-element first-letter to capitalize the first letter of text. Let’s take a look. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P { 
     font-size: 12pt; 
     line-height: 1.2; 
     width:250px;
   }   P::first-letter { 
     font-size: 224%; 
     margin-top: -5px;     font-weight: bold; 
     float:left; 
   }   SPAN { 
     text-transform: uppercase 
   }  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.The first few words of an article
    in The Economist.</P>
 </BODY></HTML>
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of using bootstrap-validator


Cross-domain usage of iframe


Four ways to declare functions in js

The above is the detailed content of How to use the pseudo element first-letter to capitalize the first letter of text. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
first-letter element
source：php.cn
Previous article：Detailed explanation of the Counters property of css Next article：Tips on using jq to send multiple ajax and then execute callbacks
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
Latest Articles by Author
Latest Issues
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
How to check if radio button group is required I have a dynamic radio button group where the required attribute may not be specified on a...
From 2024-04-03 16:23:29
0
1
306
PHP: Handling (unexpected) arrays in user input I've recently discovered that sending variables containing "unexpected" arrays (...
From 2024-04-01 17:56:37
0
1
396
How do I hover over an object so it disappears and then another object appears so I can click on it? My first object is an object of class "dog-letter". It has two objects of class ...
From 2024-04-01 13:23:16
0
1
355
Text container width sizes rendered in Chrome and Firefox are different Why do container widths render as different sizes in Chrome and Firefox? Image sample. Chr...
From 2024-03-31 13:37:43
0
1
405
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template