CSS-Frage: gepunktete Linie nur unter Text ?

Schnullerbacke

Hallo Leute,

ich habe jetzt auf der Startseite meines Blogs sim-parts.com die Titel der Beiträge mit einer gepunkteten Linie versehen, aber ich habe es noch nicht hinbekommen, diese Linie NUR UNTER DEM TEXT darzustellen und nicht unter der ganzen Zeile...

Im Web habe ich zwar was gefunden, aber ich konnte es nicht richtig einbinden. Wo muß ich was noch ergänzen ?

Hier ist mein aktueller Code:

PHP

#content .post h2 {
                font-size: 1.2em;
                                border-bottom: 1px dotted; padding: 4px;
                                margin-bottom: 15px;
            }

Danke ;-),
Chris

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Morris

Dein Rahmen ist farblos.

Einen Text kann man leider nur durchgehend dekorieren.

Gruß
Mo

spickzettel

Das border-bottom gehört unter

Code

#content .post h2 a {

Ammaletu

Tja, h2 ist eben ein Block-Element, das geht nun mal so weit. Was Du machen kannst: Im Theme noch ein span einbauen innerhalb des h2 und dann dem die gestrichelte Linie verpassen. Das würde dann nur den Text umfassen.

P.S.: Hm, mal wieder nicht schnell genug gewesen. Und ja, spickzettels Tip ist natürlich konkreter und sinnvoller als ein span einzubauen. ;-)

Schnullerbacke

*grmpf* - hab ich echt nicht gefunden, aber jetzt klappt's - vielen Dank ;-) !

Es scheint, als wäre der Beitragstitel um ein Zeichen eingerückt - aber ich schätze, daß das durch den unsichtbaren Rahmen links entsteht. Kann man des irgendwie umgehen, z.B. dadurch, daß man keinen "Rahmen" nimmt, sondern eine "Linie" unter dem Text ? Sollte sich aber nicht auf die Links auswirken, sondern nur auf die Beitragstitel...

Ciao,
Chris

Morris

Ich vermute der "unsichbare Rahmen" ist in Wriklichkeit der Innenabstand eines Elements.

Gruß
Mo

Schnullerbacke

Dann würde sich doch der Inhalt der Beitragsvorschau ebenfalls in diesem Element befinden, oder ?

Gruß,
Chris

spickzettel

Morris' Vermutung ist richtig.

Code

#content .post h2 a {padding:4px 0 4px 0;}

setzt den linken und rechten Innenabstand auf 0;

Schnullerbacke

"Again what learned" - vielen Dank :-P !!!

Grüsse,
Chris

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS-Frage: gepunktete Linie nur unter Text ?

Jetzt mitmachen!