效果圖:
文本左側顯示一個?外圓(30px,半透明)?和?內圓(12px,實色)?的同心圓:?
<!DOCTYPE html>
<html>
<head><style>.text-with-circles {position: relative;padding-left: 40px; /* 讓文本不緊貼圓圈 */}.text-with-circles::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);/* 內圓樣式 */width: 12px;height: 12px;background: #48E9FF;border-radius: 50%;/* 用 box-shadow 模擬外圓 */box-shadow: 0 0 0 9px rgba(72, 233, 255, 0.20);/* 9px = (30px - 12px)/2 */}</style>
</head>
<body><p class="text-with-circles">這里是帶有同心圓的文本</p>
</body>
</html>