CSS: Miten "div:before"-asetuksella lisätyn tekstin eteen saa tyhjän rivin?

[AimoE]

Minulla on .css-tiedostossa tällainen asetus:

Koodia: [Valitse]

div.toc:before { font-size: larger; content: "Sisältö"; }
Haluaisin edellisen rivin ja tässä lisätyn tekstin väliin hieman enemmän valkoista tilaa, siis tyhjän rivin. Saako sen tehdyksi CSS-keinoin? En ole löytänyt keinoa. Laastariksi olen lisännyt tyhjän <p></p>-rivin, mutta se ei ole hyvä. HTML-editori saatttaa poistaa sen koska elementti on tyhjä, jolloin sen sisään täytyy lisätä pakotettu tyhjämerkki, mikä tuntuu turhan monimutkaiselta. Ja siihen päälle tyhjän rivin korkeuden säätö, kaikki joka HTML-tiedostoon erikseen. Miten sen saa siirretyksi CSS-tiedostoon?

[kamara]

Koodia: [Valitse]

<br />
Siis tämäkään ei ole CSS:ää vaan normaalia HTML:ää.

Edit - toinen tapa on tehdä se on  JavaScript, mahdollisesti JQuery:lla helpottamalla.

Edit2 - Luultavasti se ei ole mahdollista tehdä pelkällä CSS:llä. Tosin en tiedä CSS:n uusimpia hienouksia. (Tosin voihan siirtää CSS:n avulla marginaaleja), mutta ymmärtääkseni et jostain syystä sitä halua tehdä.

[AimoE]

(Tosin voihan siirtää CSS:n avulla marginaaleja), mutta ymmärtääkseni et jostain syystä sitä halua tehdä.

Miten niin en halua? DIV-elementti ryhmittelyelementti. Onko ryhmittelyelementeillä marginaali? Siis on. Jeps, kokeilenpa siis sitä.

[retu]

Siellä on margin-top tai padding-top yms. Jos taas haluat pakottaa sisältöä voit (kai) käyttää content asetusta, mutta se tuntuu vähän viritykseltä.

[AimoE]

Eipä muuten auta margin-asetukset, koska ne koskevat lisätyn tekstin "Sisältö" ja div-blokin sisään tulevan tekstin väliin jäävää marginaalia. Haluan sen tyhjän ennen tekstiä "Sisältö". Miten sen saa?

[Tomin]

Eipä muuten auta margin-asetukset, koska ne koskevat lisätyn tekstin "Sisältö" ja div-blokin sisään tulevan tekstin väliin jäävää marginaalia. Haluan sen tyhjän ennen tekstiä "Sisältö". Miten sen saa?

Laita se margin tuolle :before elementille.

[AimoE]

Laita se margin tuolle :before elementille.

Kokeile itse, ei auta.

[AimoE]

No nyt löytyi: https://blog.escapecreative.com/add-line-breaks-css-generated-content/

[Tomin]

Laita se margin tuolle :before elementille.

Kokeile itse, ei auta.

Näyttäisi toimivan, jos muuttaa :before elementin block-tyyppiseksi (display: block).

[AimoE]

No nyt löytyi: https://blog.escapecreative.com/add-line-breaks-css-generated-content/

Mikään noista ei sitten toiminutkaan, vaikka kuinka yritin.

Näyttäisi toimivan, jos muuttaa :before elementin block-tyyppiseksi (display: block).

Tässä on vikana se, että "block" lisää rivinvaihdon lisätyn tekstin loppuun, jolloin se heittää seuraavan rivin alkuun toggle-nappulan, jonka haluan samalle riville. Lisään napppulan javascript-koodissa. Sen avulla avaan sisälllysluettelon tai suljen sen näkyvistä. Sisällysluettelon generoi HTML-editori.

[AimoE]

Nyt löysin oikeasti sen mitä hain. Avainsana onkin "inline-block" eikä vain "block".
Tämä siis lisää tyhjän rivin alkuun mutta ei loppuun:

Koodia: [Valitse]

div.toc:before { content: "Sisältö"; display: inline-block; margin-top: 16px; }
(jätin pois fontin muokkaukset)

[SuperOscar]

Hyvä että tähän sentään löytyi järjellinen ratkaisu. Tyhjän pystytilan lisääminen rivinvaihdolla on tasan yhtä järjetöntä HTML:ssä kuin se on tekstinkäsittelyohjelmissakin.

Nimimerkillä ”Kiroan kaikki ne ohjeet, jossa kappaleiden väliin käsketään tekemään tyhjä rivi kahdella Enterin painalluksella”. Tekstinkäsittelyssä ei koskaan pitäisi painaa Enteriä kahta kertaa peräkkäin.

[kamara]

Nimimerkillä ”Kiroan kaikki ne ohjeet, jossa kappaleiden väliin käsketään tekemään tyhjä rivi kahdella Enterin painalluksella”. Tekstinkäsittelyssä ei koskaan pitäisi painaa Enteriä kahta kertaa peräkkäin.

... paitsi luettelomerkkien tai numerointi muotoiluasetusten poistamisen yhteydessä.