[css] dopełnienie podkreślenia, coś jak spis treści w ksiązkach Opcje

[lukash82]

Witam,

Próbuję na różne sposoby osiągnąć efekt dopełnienia kreską do brzegu strony podkreślenia. Może na zrzucie ekranu będzie łatwiej wytłumaczyć:



oraz



Generalnie są to teksty w elementach blokowych <hx>. Próbowałem włożyć do hx element span i nim manipulować ale nic to nie dało. Nie mam zbytnio na to pomysłu. Chodzi też o to, żeby zachować responsywność więc podawanie sztywnych wymiarów nie wchodzi w grę. Myślałem o podłożeniu grafiki ale to takie mało eleganckie, a do tego po zmianie rozmiaru fonta wszystko się wysypie.

[HTML] pobierz, plaintext 
<h5><span itemprop='author'>autor</span>, <span class='text-muted' itemprop='dateCreated'>data</span><span class='podkreslenie'></span></h5>
[HTML] pobierz, plaintext 

oraz

[HTML] pobierz, plaintext 
<h3 itemprop='name'><span class='podkreslenie_left'></span> ŚRÓDTYTUŁ NA STRONIE <span class='podkreslenie_right'></span></h3>
[HTML] pobierz, plaintext 

Macie może na to jakiś patent? A może się poprostu nie da...

Pozdrawiam, Ł.

[trueblue]

1. Możesz używać pseudoelementów ::after i ::before (prawo/lewo).
2. Możesz też użyć podkreślenia dla całości <hX>, a dla elementu, w którym nie ma podkreślenia użyć białego podkreślenia lub białego tła (przykryć).

[Neutral]

[HTML] pobierz, plaintext 
<h2>Welcome</h2>
<span style="border-top:1px solid red;display:block;margin-top:-20px;margin-left:100px;overflow-x:hidden;"></span>
[HTML] pobierz, plaintext 

[lukash82]

Cześć,

Dzięki za podpowiedź ~trueblue. Zupełnie mi to gdzieś umknęło...

Ukulałem coś takiego: JSFiddle

Narazie próbuję to ogarnąć bez generowania obrazka. Problem mam jednak z równym dopełnieniem do krawędzi...

[trueblue]

https://jsfiddle.net/qwobguz9/2/