Codelab Editor

Free Online HTML Editor

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Welcome to Codelab Editor</title>
		<style>
			body {
				padding: 10px;
				background: #fafaf0;
				font-family: Arial, sans-serif;
			}
			/* Example: Insert symbols before each list item */
			.special-list li:nth-child(1)::marker {
				content: "\2605 "; /* ★ */
			}
			.special-list li:nth-child(2)::marker {
				content: "\2600 "; /* ☀ */
			}
			.special-list li:nth-child(3)::marker {
				content: "\227B "; /* ≻ */
			}
			.special-list li {
				padding-left: 8px;
			}
			/* Add escape characters before headings */
			h3::before {
				margin-right: 6px;
			}
			.heading-1::before {
				content: "\21D2"; /* ⇒ */
			}
			.heading-2::before {
				content: "\270E"; /* ✎ */
			}
		</style>
	</head>
	<body>
		<h2>CSS Unicode Escape Characters Example</h2>
		<p>Below is a simple example showing how to use Unicode escape characters in CSS to style list markers with custom symbols.</p>

<ul class="special-list">
			<li>Featured product item</li>
			<li>Important update note</li>
			<li>Special offer available</li>
		</ul>

<br>

<h3 class="heading-1">Section One</h3>
		<h3 class="heading-2">Section Two</h3>
	</body>
</html>

Editor Commands

Ctrl

Find

Ctrl

Find Next

Ctrl

⇧

Find Previous

Ctrl

⇧

Find & Replace

Ctrl

]

Indent Code Right

Ctrl

[

Indent Code Left

⇧

Tab

Auto Indent Code

Ctrl

Line Comment

Ctrl

Alt

Block Comment

TutsInsider Actions

Alt

Run Code

Ctrl

Copy Editor Code

Ctrl

Select All Editor Code

Ctrl

Save/Download

Ctrl

Alt

Rotate

Ctrl

Alt

Switch Theme

Ctrl

⇧

Open Console

Esc

Close Console