A fekete <u>. </u> (underline---aláhúzott) vonal ilyenkor miért nem tűnik el HTML-ben? <style> . Color { border-bottom: 3px solid yellow; } </style>

Az <u> tag szöveg formázására való, az aláhúzás egy blokkon belüli szöveg vagy szövegrész aláhúzottá formázására való, és a színe megyegyezik a szöveg színével.

A border egy html elem (ami lehet blokk vagy inline is) elemhatároló vonalait formázhatja, nem azonos az aláhúzással.

Azt tanácsolom ha nem aláhúzást akarsz használni, akkor ne azt használj. Használj helyette <span> elemet, ami szintén inline tag, de önmagában nem formázza meg a belefoglalt szöveget:

<span class="color">Az ötöslottó e heti várható főnyereménye:</span>

css:

.color {

border-bottom: 3px solid Yellow;

}

az u » underline formázott elem css formázása: text-decoration: underline;

Ez a szöveg "dekorációja", a border pedig block / elem szegélye.

Ha a szöveg 2 sorba törik, az text-decortion mind két sort aláhúzza, míg a border-bottom, csak a blok alsó szegélye, tehát nem a szöveget húzza alá.

Meg lehet csinálni, hogy sárga legyen az aláhúzás, de ez se az igazi, mert a vastagságát nem tudod állítani.

Az én megoldásom, kicsit bonyolultabb mint egy border, de univerzálisabb.

Egy display: inline; -nek ha hátteret adsz meg addig tart ameddig a szöveg, tartalom, illetve ha sortörés van, azt is tudja követni.

Így pl. SVG -vel egyedi hátteret tudsz alá helyezni ami így akár egy aláhúzás is lehet.

Ez a mintámban a 7. és 8.

Minta: [link]

<u class="color"><span>7. Az ötöslottó e heti várható főnyereménye:</span></u>

<style>

.color {

display: inline-block;

text-decoration: none;

}

.color > span {

display: inline;

background-repeat: repeat-x;

background-image: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns=" [link] width="10" height="10" style="background-color:yellow"></svg>');

background-position: 0em 0.9em;

background-size: auto 3px;

}

</style>