When OL defines an ordered list, unless list-style-position:inside; is specified, the text and leading characters are indented.
But sometimes, the list types defined by OL have restrictions. For example, the Chinese characters "one, two, and three" cannot be defined. We have to manually enter these characters, but this time the text and characters are connected together.
Run code box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>first-letter</title>
<style type="text/css">
body{font-size:12px;width:600px;margin:2em auto;}
</style>
</head>
<body>
<ol>
<li>Originally known as the Box Model Acid Test, it is a web page used to test browsers. Developed in October 1998, it became an important benchmark for compatibility with early browsers, especially browser support for Cascading Style Sheets 1.0. Just like using an acid test to quickly and visually measure the quality of a piece of metal, the goal of the web acid test is to provide a way to clearly indicate whether a browser is complying with Web standards. </li>
<li>This version is designed by the Web Standards Project for comprehensive testing of support for HTML, CSS 2.0, and PNG image[1] standards. </li>
<li>Officially released on March 3, 2008, its testing focus is on ECMAScript, DOM Level 3, Media Queries and data: URL[3]. After opening this test webpage with a browser, the page will continuously load functions [4] and give scores based on the test situation, with a full score of 100</li>
</ol>
<hr />
<ol style="list-style:none;">
<li>1. Originally known as the box model acid test, it is a web page used to test browsers. Developed in October 1998, it became an important benchmark for compatibility with early browsers, especially browser support for Cascading Style Sheets 1.0. Just like using an acid test to quickly and visually measure the quality of a piece of metal, the goal of the web acid test is to provide a way to clearly indicate whether a browser is complying with Web standards. </li>
<li>2. This version is designed by the Web Standards Project for comprehensive testing supporting HTML, CSS 2.0 and PNG image [1] standards. </li>
<li>3. Officially released on March 3, 2008, its testing focus is on ECMAScript, DOM Level 3, Media Queries and data: URL[3]. After opening this test webpage with a browser, the page will continuously load functions [4] and give scores based on the test situation, with a full score of 100</li>
</ol>
</body>
</html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]
At this time, you can use the first-letter pseudo-class to help:
Run code box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>first-letter</title>
<style type="text/css">
body{font-size:12px;width:600px;margin:2em auto;}
ol.list { list-style:none; }
ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;}
</style>
</head>
<body>
<ol>
<li>Originally known as the Box Model Acid Test, it is a web page used to test browsers. Developed in October 1998, it became an important benchmark for compatibility with early browsers, especially browser support for Cascading Style Sheets 1.0. Just like using an acid test to quickly and visually measure the quality of a piece of metal, the goal of the web acid test is to provide a way to clearly indicate whether a browser is complying with Web standards. </li>
<li>This version is designed by the Web Standards Project for comprehensive testing of support for HTML, CSS 2.0, and PNG image[1] standards. </li>
<li>Officially released on March 3, 2008, its testing focus is on ECMAScript, DOM Level 3, Media Queries and data: URL[3]. After opening this test webpage with a browser, the page will continuously load functions [4] and give scores based on the test situation, with a full score of 100</li>
</ol>
<hr />
<ol class="list">
<li>1. Originally known as the box model acid test, it is a web page used to test browsers. Developed in October 1998, it became an important benchmark for compatibility with early browsers, especially browser support for Cascading Style Sheets 1.0. Just like using an acid test to quickly and visually measure the quality of a piece of metal, the goal of the web acid test is to provide a way to clearly indicate whether a browser is complying with Web standards. </li>
<li>2. This version is designed by the Web Standards Project for comprehensive testing supporting HTML, CSS 2.0 and PNG image [1] standards. </li>
<li>3. Officially released on March 3, 2008, its testing focus is on ECMAScript, DOM Level 3, Media Queries and data: URL[3]. After opening this test webpage with a browser, the page will continuously load functions [4] and give scores based on the test situation, with a full score of 100</li>
</ol>
<hr />
<ol class="list">
<li>1. Originally known as the box model acid test, it is a web page used to test browsers. Developed in October 1998, it became an important benchmark for compatibility with early browsers, especially browser support for Cascading Style Sheets 1.0. Just like using an acid test to quickly and visually measure the quality of a piece of metal, the goal of the web acid test is to provide a way to clearly indicate whether a browser is complying with Web standards. </li>
<li>2. This version is designed by the Web Standards Project for comprehensive testing supporting HTML, CSS 2.0 and PNG image [1] standards. </li>
<li>3. Officially released on March 3, 2008, its testing focus is on ECMAScript, DOM Level 3, Media Queries and data: URL[3]. After opening this test webpage with a browser, the page will continuously load functions [4] and give scores based on the test situation, with a full score of 100</li>
</ol>
</body>
</html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]
This time, the leading character is kept at a certain distance from the text, and you can control more styles.
However, the style of the comma after the leading character cannot be controlled, but I wonder if I can set a background image to replace it?
A simple test found that controlling the background of the first-letter pseudo-class is as confusing as controlling the list-style-image, so it was abandoned.
In addition, each browser treats the symbols next to the leading character differently. Since Safari is not installed, I did not test it:
Code:
.png)
Rendering result:
.jpg)
IE8, FF3 and Opera behave the same. Chrome only processes the symbols on the left, while IE6 and 7 only process the first character.