Css onderstreept lettertype. Mooie CSS-onderstreping van elementen

Onderstreep voor blok elementen als een label

kan op twee manieren worden gedaan. Stel de lijn onder de tekst bijvoorbeeld in op de gehele breedte van het blok, ongeacht het volume van de tekst. En onderstreep ook alleen de tekst. Vervolgens zullen we beide opties overwegen.

Lijn onder de tekst over de gehele breedte van het blok

Om een ​​lijn onder de tekst te maken, moet u de stijleigenschap border-bottom aan het element toevoegen; de waarde ervan is zowel de dikte van de lijn, de stijl als de kleur (voorbeeld 1).

Voorbeeld 1. Lijn over de volledige breedte

HTML5 CSS 2.1 IE Cr Op Sa Fx

Voorbeeld tekst

De afstand van de lijn tot de tekst kan worden aangepast door de eigenschap opvulling-bottom toe te voegen aan de H1-selector. Resultaat dit voorbeeld getoond in afb. 1.

Tekst onderstrepen

Om alleen de tekst te onderstrepen, moet u de eigenschap text-decoration gebruiken met de waarde underline en deze opnieuw toevoegen aan de H1-selector (voorbeeld 2).

Voorbeeld 2. Breedte van lijn naar tekst

HTML5 CSS 2.1 IE Cr Op Sa Fx

Voorbeeld tekst

De zwarte kop trekt de aandacht, ook al is deze zwart en niet wit.

Het resultaat van dit voorbeeld wordt getoond in Fig. 2.

Wanneer u de eigenschap text-decoration gebruikt, wordt de lijn stevig aan de tekst bevestigd, zodat de positie en stijl ervan niet kunnen worden bepaald.

Ik presenteer korte fragmenten van CSS-code (fragment) om het markeren van linkankers te implementeren met vloeiende onderstreping bij het zweven.
Waarom je de tekst moet scheiden van de algemene puinhoop is een goed idee. Er is een grote verscheidenheid aan manieren en soorten linkontwerp, alles wordt alleen beperkt door de verbeeldingskracht van de meester.
Met behulp van de pseudo-class:hover en magic kun je vrijwel elk effect koppelen aan standaard, saai ontworpen cyanotische links.
De oplossingen die vandaag worden besproken zijn niet bijzonder verbazingwekkend of ongewoon. Alles is eenvoudig, zonder speciale toeters en bellen, alleen de link in kleur benadrukken en eenvoudige animatie lijnen onderstrepen.

Ik zal alleen de CSS-code in detail beschrijven, omdat er aan de HTML-kant niets hoeft te worden gewijzigd of toegevoegd.

CSS

Gebruik eerst de eigenschap line-height: set regelafstand afhankelijk van de basislijn van het lettertype kan uw betekenis anders zijn. Laten we van de link een blokregellink maken, ingebed in de tekststructuur, door de weergave-eigenschap in te stellen op inline-block . Laten we ons ervan ontdoen standaard onderstrepingsteken door tekstversiering: geen te schrijven; en vul de link met de kleur die we nodig hebben.

a ( regelhoogte: 1; weergave: inline-blok; kleur:#ffeb3b; tekstdecoratie: geen; cursor: aanwijzer; )

Vervolgens gebruiken we het pseudo-element:after zodat we kunnen toevoegen extra element, in ons geval is dit een lijn, en we zullen een eenvoudig overgangseffect definiëren in de overgangseigenschap: . De lijnbreedte wordt aanvankelijk ingesteld op nulbreedte: 0%; , de hoogte wordt bepaald in 2px. De lijnkleur kan van alles zijn; in het voorbeeld ben ik niet al te creatief geworden en heb ik de kleuren van de linktekst aangepast.

a:after (weergave: blok; inhoud: ""; hoogte: 2px; breedte: 0%; achtergrondkleur: #ffeb3b; overgang: breedte .3s gemak-in-uit; )

Het enige dat overblijft is een beetje beweging aan onze link toevoegen. Om dit te doen, gebruiken we een aantal pseudo-klassen: hover en: focus . De eerste bepaalt de stijl van de link wanneer deze zweeft, de tweede werkt wanneer de cursor “strak” op de link wordt geplaatst. Hier zullen we de breedtewaarde wijzigen en instellen op 100%.
Wanneer u nu op een link zweeft of erop focust, zal er voor het oog van de gebruiker een gestileerde onderstreping verschijnen, soepel met een nauwelijks merkbare vertraging, waarvan we de tijd voorzichtig eerder in de transitie-eigenschap hebben gedefinieerd: .

a:hover:after, a:focus:after ( breedte: 100%; )

Als gevolg hiervan krijgen we het volgende beeld:

De volledige samengestelde code ziet er als volgt uit:

a ( weergave: inline-blok; kleur:#ffeb3b; regelhoogte: 1; tekstdecoratie: geen; cursor: aanwijzer; ) a:after ( achtergrondkleur: #ffeb3b; weergave: blok; inhoud: ""; hoogte: 2px; breedte: 0%; webkit-overgang: breedte .3s gemak-in-uit; -moz--overgang: breedte .3s gemak-in-uit; breedte: 100%;

Dit is natuurlijk slechts een van de eenvoudigste en meest bescheiden opties voor linkontwerp. Experimenteer meer, voeg kleuren toe, gebruik animatie, beweeg naar rechts of links, maak bijvoorbeeld omgekeerde links, enz., enz., het belangrijkste is om het niet te overdrijven, alles moet met gevoel, gevoel en arrangement zijn .

Update en aanvullingen vanaf 22-10-2017

In de reacties stonden vragen over hoe je vanuit het midden van de linktekst een onderstreping kunt maken, met een vloeiende rek naar de zijkanten. Als er vraag is, zal er aanbod zijn))).

Alles is vrij eenvoudig, je hoeft alleen maar een paar nieuwe eigenschappen toe te voegen, dat wil zeggen dat je voor het hoofdelement a de positionering definieert als relatieve positie: relatief; , en voor het pseudo-element a:after absolute position:absolute; met afstand vanaf de linkerrand ouderelement links: 50%; , en ook met behulp van de eigenschap transform om de horizontale verschuiving van het element te bepalen met de opgegeven waarde transform:translateX(-50%) .

Bij de uitvoer krijgen we dit resultaat:

Allemaal gemonteerd css-code, om de link vanuit het midden soepel te onderstrepen, zou er ongeveer zo uit moeten zien:

a ( weergave: inline-blok; kleur:#ffeb3b; regelhoogte: 1; tekstversiering: geen; cursor: aanwijzer; positie: relatief; ) a:after ( achtergrondkleur: #ffeb3b; weergave: blok; inhoud : ""; breedte: 0% positie:absoluut; breedte .3s gemak-in-uit; ; -moz-transform:translateX(-50%); na, a:focus:na ( breedte: 100%; )

Vandaag de dag, gezien dat alles moderne browsers CSS3-eigenschappen worden steeds meer ondersteund, er zijn vrijwel geen beperkingen aan origineel ontwerp links, over het algemeen hangt het allemaal af van je fantasieën, en kant-en-klare oplossingen Er zijn er genoeg op internet, je kunt ze vinden, zoals ze zeggen - voor elke smaak en kleur.

Met vriendelijke groet, Andrej

MET met behulp van html de tekst kan worden gegeven mooi ontwerp. Het onderstrepingselement is erg populair, maar niet allemaal reguliere gebruikers weet hoe je het moet gebruiken.

Onderstrepen in HTML

Dus hoe onderstreep je? in html wordt het opgemaakt met behulp van een tag . Het wordt gebruikt in alle html- en xhtml-specificaties, maar alleen onder de voorwaarde van overgang , omdat de browserversie van de markup moet worden opgegeven. In dit geval wordt de validatie van het document met succes doorstaan. Het element moet standaard worden aangegeven, dat wil zeggen helemaal bovenaan de pagina.

Label sluiten, moet het vergezeld gaan. Je moet het als volgt aan de opmaak toevoegen:

1. Kop nummer één

Ons tekst in een paragraaf

Het woord "tekst" wordt onderstreept.

Je kunt ook benadrukken aparte brief in één woord:

1. Rubriek nummer twee

Onze Naar st in paragraaf

Traditioneel in opmaak html onderstrepen koppelingen worden weergegeven wanneer er met de muis overheen wordt bewogen of zelfs wanneer ze stil staan, en dit gebeurt standaard in alle browsers. Plaats daarom de tag op op een voortdurende basis ten zeerste niet aanbevolen.

Daarnaast zorgt schrijfstijlen in css ervoor dat de code compacter wordt, waardoor de pagina sneller laadt.

Meestal passen lay-outontwerpers stijlen toe door randen toe te voegen of te onderstrepen aan HTML of door ze in een apart CSS-bestand te plaatsen.

Onderstrepen in CSS

Tekst versieren wanneer css-hulp- een handige en praktische manier. Het meest eenvoudige manieren dergelijke accentuering: gebruik van tekstversiering of rand-onderkant.

Om tekst met tekstversiering te markeren, moet de eigenschap aan de gewenste klasse worden toegevoegd.

• gewenste klasse (
• tekstversiering: onderstrepen;

Houd er rekening mee dat klassenamen altijd in het Latijn worden geschreven.

Decoratie kan ook met randen. Met randen kunt u zowel een regelmatige (ononderbroken) onderstreping als een gestippelde lijn maken. Om dit te doen, worden de noodzakelijke randeigenschappen gespecificeerd, maar wordt de eigenschap voor tekstdecoratie verwijderd.

• gewenste klasse (
• tekstversiering: geen;

De tekst wordt vervolgens gedecoreerd met behulp van de volgende eigenschap:

• .gewenste klasse (
• tekstversiering: geen;
• rand-onder: 2px onderbroken zwart;

Dit is hoe de decoratie eruit komt: om het solide te maken, wordt in plaats van “gestippeld” “solid” gebruikt. Voor degenen die tekst graag willen versieren met gestippelde onderstreping, kunt u "gestippeld" proberen.

Kaderstijlen worden op één regel geschreven. Naast het onderstrepingstype moet u ook de onderstrepingsdikte en -kleur opgeven. Je kunt experimenteren met het formaat, maar meestal is 1 of 2 pixels voldoende. De tekstkleur kan ook worden ingesteld op de onderstrepingskleur:

• gewenste klasse (
• tekstversiering: geen;
• rand-onder: 1px blauw gestippeld;
• kleur: blauw;

Zo zal het wel lukken blauwe tekst met blauw ontwerp. Om een ​​stijl aan HTML te koppelen, moet je een klasse aan de markup toevoegen.

• Derde titel

Onze tekst in een paragraaf

Dat is alles, dat zijn de basisprincipes van onderstrepen in html.