Czarna Linia Pozioma i napis na linii

pytanie zadane 9 maja w HTML i CSS przez V&Johnny Nowicjusz (150 p.)

Witam

Czy jest możliwe zrobienie czarnej linii (znacznik hr) i umieszczeniu zielonego napisu na tej linii?

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

Coś takiego: https://forum.pasja-informatyki.pl/583235/linia-pozioma-po-prawej-i-lewej-stronie-napisu ?

komentarz 9 maja przez V&Johnny Nowicjusz (150 p.)

Nie, chodziło mi o zrobienie lini o grubości np: 9px, i dodaniu na ta linię tekstu, chodzi mi o to żeby ten tekst był w środku tej linii

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

Znacznikowi hr możesz nadać grubość.

komentarz 9 maja przez niezalogowany

@V&Johnny, czy chodzi o zrobienie lini na stronie a na niej umiescic zielony text jezeli tak to oczywiscie ze sie da

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

@Mist: Jak? Pokaż kod.

komentarz 9 maja przez niezalogowany

?? uch wiesz napewno twoje punkty nie pochodzią tylko z zadawania pytan?:D

komentarz 9 maja przez V&Johnny Nowicjusz (150 p.)

@Mist, Tak, o to mi właśnie chodzi

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

@Mist, ale to ty twierdzisz, że wiesz. Zatem pokaż kod,abym i ja się mógł nauczyć, w końcu uczymy się przez całe życie.

komentarz 9 maja przez niezalogowany

no nie wierze

komentarz 9 maja przez niezalogowany

dobra chwile

4 odpowiedzi

odpowiedź 9 maja przez Comandeer Guru (604,780 p.)
wybrane 10 maja przez V&Johnny

Najlepsza

Element hr jest bardzo niewdzięczny, jeśli chodzi o takie rzeczy, bo nie może zawierać treści. Da się jedynie coś kombinować z pseudoelementami – dokładnie w sposób, jaki podlinkował @SzkolnyAdmin w komentarzu.

Natomiast jeśli nie musi to być hr, to… wystarczy zrobić div z wysokością 9px i odpowiednim tłem ;) I wówczas można w tym umieścić dowolną treść. Z perspektywy usera to będzie wyglądać jak linia z napisem.

komentarz 9 maja przez niezalogowany

no czyli to flatego tak mówił cos tak czułem

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

@Comandeer, i to wygląda na optymalne rozwiązanie: blok o dowolnej wysokości z napisem w dowolnym miejscu bloku, w końcu hr nie jest przeznaczony do takich celów.

The <hr> HTML element represents a thematic
break between paragraph-level elements:
for example, a change of scene in a story,
or a shift of topic within a section.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

odpowiedź 9 maja przez Piotrek2713 Mądrala (5,500 p.)

Chodzi o podkreślenie?

Jeśli tak to robisz

hr {
  text-decoration: underline;
  text-decoration-color: black;
}

czyli ustawiasz podkreślenie i kolor dla podkreślenia

hr {
  color: green
}

kolor tekstu jako zielony

text decoration

komentarz 9 maja przez SzkolnyAdmin Szeryf (88,500 p.)

A to zadziała?

komentarz 10 maja przez VBService Ekspert (255,800 p.)

@Piotrek2713, ustawienia css, które podałeś nie mają wpływu na element <hr>

<hr>
<hr class="decoration">

<style>
  hr.decoration {
    text-decoration: underline;
    text-decoration-color: black;
    color: green;
  } 
</style>

odpowiedź 9 maja przez VBService Ekspert (255,800 p.)
edycja 11 maja przez VBService

zrobienie linii o grubości np: 9px, i dodaniu na ta linię tekstu ...

... zrobienie czarnej linii (znacznik hr) i umieszczeniu zielonego napisu na tej linii

może spróbuj użyć ::after

<hr data-text="zielony napis na linii">

<style>
  hr {
    overflow: visible;
    padding: 0;
    border: none;
    border-top: 9px solid black;
    text-align: center;
    margin: 1rem 0;
  }
  hr::after {
    content: attr(data-text);
    position: relative;
    top: -1.25rem;
    z-index: 99;
    font-size: 1.5rem;
    color: limegreen;
    background: transparent;
  }
</style>

spróbuj też np. z <svg>

<svg width="600" height="100">
  <line x1="50" y1="50" x2="550" y2="50" style="stroke:black; stroke-width:9"></line>
  <text x="300" y="55" font-size="1.5rem" font-family="Arial" fill="limegreen" text-anchor="middle">zielony napis na linii</text>
</svg>

odpowiedź 9 maja przez niezalogowany

masz ps ustaw text w hr i btw nie wiem co to znacznik hr wiec cos mogłem pomylic

hr{

background-color: black;
width:// ustaw sobie 
height:/// tez 
color: green;


}
// teraz w html w znaczniku hr dodaj text

moze dlatego szeryf szkolny to mówi

2	komentarz 9 maja przez Comandeer Guru (604,780 p.) W jaki sposób ustawić tekst w elemencie, który nie ma znacznika zamykającego?

komentarz 9 maja przez niezalogowany

wybacz nie wiedziałem co to hr

2	komentarz 10 maja przez Panelinio Dyskutant (9,790 p.) czy chodzi o zrobienie lini na stronie a na niej umiescic zielony text jezeli tak to oczywiscie ze sie da wybacz nie wiedziałem co to hr ?