Hur man skapar: textavgränsningslinje

Hur man skapar responsiva textavgränsningslinjer

Steg 1 - Lägg till HTML:

<div class="divider">Lorem Ipsum</div>

Steg 2 - Lägg till CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Prova själv

Fördelningsexempel:

Detta exempel visar hur man använder CSS för att skapa en textavgränsningslinje. Specifikt använde det en kombination av HTML och CSS för att uppnå detta effekt.

Först, behöver du lägga till en <div>-element med klassnamnet "divider" i HTML och placera det text du vill visa (i detta exempel är texten "Lorem Ipsum").

Sedan, i CSS, ställde du in .divider Klassinställningar har några stilar. Du har ställt in teckenstorleken till 30 pixlar, använt flex-layout och ställt in align-items: center; för att centrera texten vertikalt i avgränsningslinjen.

därefter använde du pseudoelement ::before och ::after för att lägga till dekorationer på båda sidor av avgränsningslinjen. Båda dessa pseudoelement har ställts in flex: 1 för att göra dem ta upp .divider Alla utrymmen i elementet utom texten. Du har också ställt in content: '' För att säkerställa att dessa två pseudoelement är tomma och inte innehåller något innehåll.

Sed definire stilen för avgränsningslinjen genom att ställa in inre marginaler, bakgrundsfärg och yttre marginaler. I detta exempel är avgränsningslinjens färg röd och den har också några inre och yttre marginaler.