<div class="container">
<ul>
<li class="list-item">Unordered list item</li>
</ul>
<ol>
<li class="list-item">Ordered list item</li>
</ol>
<div class="list">
<div class="list-item">display list item</div>
</div>
</div>
<div class="form">
<label for="content">content(for ::marker):</label>
<select name="content" id="contet">
<optgroup label="字符">
<option value="'Go!'">Go!</option>
</optgroup>
<optgroup label="HTML实体符">
<option value="'➤'">➤</option>
<option value="'❢' '𝄞'">'❢' '𝄞'</option>
<option value="'\2762'">'\2762'</option>
<option value="'\2763' '\2141'">'\2763' '\2141'</option>
</optgroup>
<optgroup label="表情符号">
<option value="'🔥'">🔥</option>
<option value="'🐻' '🐶'">'🐻' '🐶'</option>
<option value="'\01F33A'">'\01F33A'</option>
<option value="'\01F42C' '\01F41F'">'\01F42C' '\01F41F'</option>
</optgroup>
<optgroup label="引号">
<option value="open-quote">open-quote</option>
</optgroup>
<optgroup label="图片">
<option value="url('//www.w3cplus.com/sites/default/files/blogs/2021/2108/rocket.svg')">url(//www.w3cplus.com/sites/default/files/blogs/2021/2108/rocket.svg)</option>
</optgroup>
</select>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
inline-size: 100vw;
min-block-size: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
font-family: "Exo", Arial, sans-serif;
background-color: #f7f7f7;
line-height: 2;
}
.container {
padding: 40px;
background: #fff;
box-sizing: border-box;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
min-width: 40vw;
max-width: 40vw;
border-radius: 5px;
position: relative;
}
select {
max-width: 200px;
}
.list > .list-item {
display: list-item;
}
:root {
--content: "»»»";
}
.list-item::marker {
content: var(--content);
color: #f36;
font-size: 1.5rem;
text-shadow: 2px 2px 0px #09f;
text-transform: capitalize;
letter-spacing: 5px;
transition: all 0.2s ease-in;
/* 不生效的 CSS */
background: #909090;
transform: rotate(30deg);
opacity: 0.5;
filter: blur(10px);
width: 50px;
height: 50px;
margin-right: 40px;
}
.list-item:hover::marker {
font-size: 0.9em;
color: lime;
text-shadow: -2px -2px 1px #090909;
}
.list .list-item::marker {
animation: change 3s ease-in-out infinite;
}
@keyframes change {
50% {
color: hotpink;
text-shadow: 1px 1px 1px green;
font-size: 2rem;
}
}
const rootEle = document.documentElement;
const select = document.getElementById("contet");
select.addEventListener("change", (etv) => {
rootEle.style.setProperty("--content", etv.target.value);
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.