Wie reduziere ich die Schriftgröße meines (AM/PM) <spannes> innerhalb eines <div>, das Zeitelemente mit AM/PM -Suffix en ⇐ CSS

[Anonymous]

Ich habe das folgende CSS -Setup. CSS wird mit JavaScript erstellt. JavaScript hat jetzt CSS -Elemente. Es ist beabsichtigt, die Zeit mit AM/PM -Suffix anzuzeigen. Aber ich wünsche mir, dass AM/PM bei unterschiedlicher Schriftgröße das Rauschen und die Ablenkung von der tatsächlichen Zeit verringert. Interessanterweise scheint das Tagesmarken (Wochentagsetikett, z. B. Mon, Dienstag usw.) gut zu funktionieren, aber nicht die Zeitperiode./* Target the AM/PM part of the time inside .next-congregation */
#contentContainerTopLeft .next-congregation .time-period {
font-size : 0.7em !important; /* Smaller size for AM/PM */
vertical-align : super !important; /* Align slightly above the baseline */
}

/* Target the Day label in the next-congregation */
#contentContainerTopLeft .next-congregation .day-label {
font-size : 1rem; /* Smaller size for Day */
font-weight : bold; /* Optional: Make it stand out */
margin-right : 1px; /* Add spacing between Day and Time */
}

.next-congregation {
font-size : 1.3rem;
color : #FFD700;
margin-top : 1px;
}
< /code>

6:10 AM
6:44 AM

WakeupTime
6:10 AM
SA:6:00AM, SU:6:00AM


< /code>
Jsfiddle < /p>
Das berechnete Ergebnis (angehängte Screenshot) im Konsolen-Tool hat auch keinen Bezug zur Zeitperiode. Entschuldigung im Voraus, wenn der Beitrag nicht bis zum Standard strukturiert ist. Alt = "" Src = "https://i.sstatic.net/z4spoysm.png"/>