Der Menüname „Aktuelles“ soll mit CSS unterstrichen werden

Gelöst andimitro27
(@andimitro27)

vor 2 Jahren, 5 Monaten
Hallo Zusammen. Leider habe ich kein passendes Forum dafür gefunden aber vielleicht könnt ihr mir helfen. Sowohl in der mobilen als auch für die Desktop-Version möchte ich, dass der Menüname „Aktuelles“ unterstrichen wird, sobald ein Einzelbeitrag angesehen wird. Für die restlichen Seiten habe ich den folgenden Code verwendet und das funktioniert auch:
```
@media (min-width: 768px){
.hfe-pointer__underline .menu-item.parent a.hfe-menu-item::before, 
.hfe-pointer__underline .menu-item.parent a.hfe-menu-item::after {
    height: 1.5px;
    width: 75%;
     left: 10px;
     }
.page-id-579 #menu-item-590 a.hfe-menu-item::after,
.page-id-585 #menu-item-590 a.hfe-menu-item::after,
.page-id-578 #menu-item-590 a.hfe-menu-item::after {
		background-color: #00006D;
		height: 1.5px;
 		width: 75%;
		left: 10px;
		opacity: 1;
}
}
```
Was ich genau meine sieht man auf dem folgendem Screenshot: https://imgur.com/Vxu7eSq
Da es sich um eine Abschlussarbeit handelt, wäre ich sehr froh über eure Hilfe.
VG

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 5 Monaten
Das ist hier kein Support-Forum zu CSS und deine Frage ist deshalb hier off topic. Ich ändere den Status des Threads deshalb auf „keine Support-Frage“.

Probier mal
```
.single-post #menu-item-1783 a::after {
    background: #00006D;
    height: 1.25em;
    width: 77%;
    left: 10px;
}
```
pezi
(@pezi)

vor 2 Jahren, 5 Monaten

Will den Sinn des doch langen Code fürs unterstreichen verstehen:
Wurde a:active ... text-decoration: underline; deprecated?
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 5 Monaten
Hallo @pezi

worum weder border-bottom noch text-decoration: underline genutzt wurden, habe ich mich auch gefragt.

a:active bringt in diesem Fall allerdings nichts, denn der Menüpunkt Aktuelles soll gestyled sein, wenn die Beiträge, die auf der Seite Aktuelles verlinkt sind, angeklickt wurden.

@andimitro27
```
.postid-1819 #menu-item-1783 a.hfe-menu-item::after,
.postid-1848 #menu-item-1783 a.hfe-menu-item::after,
.postid-1862 #menu-item-1783 a.hfe-menu-item::after {}
```
Wären die spezifizierten Anfasser für die 3 Beiträge, die auf der Seite Aktuelles zu finden sind.

Nachtrag:
Der Code von Bego Mario spricht alle Beiträge an und ist definitiv die bessere Wahl, da auch künftig alle Beiträge, die dem Menüpunkt „Aktuelles“ zugeordnet werden, entsprechende Auswirkung auf dessen Style haben werden.

Wird es in Zukunft da eine Differenzierung geben und nur eine bestimmte Kategorie dem Menüpunkt Aktuelles zugeordnet sein, wirst du eine andere CSS-Klasse von body verwenden müssen.
- Diese Antwort wurde geändert vor 2 Jahren, 5 Monaten von Angelika Reisiger.
Thread-Starter andimitro27
(@andimitro27)

vor 2 Jahren, 5 Monaten

Hallo Zusammen, vielen Dank für eure Hilfe! Sowohl der Vorschlag von @pixolin als auch von @la-geek waren hilfreich für mich.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 5 Monaten

worum weder border-bottom noch text-decoration: underline genutzt wurden, habe ich mich auch gefragt.

border-bottom: 1px solid #00006D;

wäre naheliegend, allerdings lässt sich damit die Breite des Unterstrichs nicht festlegen. Gegen

text-decoration: underline;

spricht, dass sich der Unterstrich gar nicht formatieren lässt.

Der Theme-Entwickler hat sich hier entschieden, mit einem Pseudoselector :after einen leeren Inhalt zu verwenden. Der Hintergrund bekommt die gewünschte Farbe und Höhe zugewiesen, um den Eindruck eines Unterstrichs zu vermitteln, Breite und Position lassen sich steuern. Deshalb die kompliziertere Lösung.

Eine Lösung mit text-decoration oder border-bottom hätte sich deutlich von der übrigen Gestaltung der Navigation unterschieden.
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 5 Monaten
Ich weiß, was da gemacht wurde und passiert ist, @pixolin, deswegen hatte ich nicht meine Verwunderung geäußert.

Sondern: Wäre es ein Gradient gewesen, hätte ich die Vorgehensweise nachvollziehen können (Gradient geht zwar auch mit border-image, aber der Browser-Support ist nicht vollständig).

ein
```
a::after {
    border-bottom: 1px solid red;
    width: 77%;
    content: "";
    left: 10px;
}
```
hätte es auch getan.

Und in diesem Fall sitzt der „Unterstrich“ genau unter dem Link (a), also hätte man das Padding links/rechts vom Link entfernen können (stattdessen dieses Padding dem Listenpunkt (li) geben) und wäre ganz ohne das Pseudo-Element :after ausgekommen.

Border kann Transparenz und auch relative Breiten.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 5 Monaten
Ich sehe das eher pragmatisch und hab mich daran orientiert, was der/die Theme-Entwickler/-in verwendet hat.

Border kann […] auch relative Breiten.

Wie das?

Nehmen wir an, wir haben als HTML-Code

<div class="unterstrichen">Text</div>

und CSS
```
.unterstrichen {
width: 300px;
background: blanchedalmond;
padding: 10px;
}
```
und ich möchte, dass der Block eine Unterstreichung hat, die 70% der Blockbreite ausmacht:

… lässt sich das mit einer CSS-Regel zu border und ohne weitere HTML-Abschnitte umsetzen?

off topic, schon klar …
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 5 Monaten
mit Breite meine ich die Höhe/Dicke des Borders. Man sagt ja auch Der Border ist 10px breit, man sagt nicht der Border ist 10px hoch oder die CSS-Anweisung lautet ja auch border-width.

Bei Zuhilfenahme von :after wird die Länge des Borders durch die width von :after bestimmt. Die du in deinem Beispiel für den roten Strich vermutlich auch angewendet hast = https://jsfiddle.net/Lcmzug9t/

Im vorliegenden Fall des TE war/ist jedoch immer die Länge des Links gewünscht, hier wäre es genauer und vor allem auch zukunftssicher, Links-/Rechts-Padding vom Link zu entfernen und dem Link einfach ein border-bottom zu geben. Ändert man den verlinkten Text, dann passt sich der Border genau automatisch dieser neuen Länge an.

Das :after stammt m. M. n. übrigens nicht vom Theme, sondern vom Navigations-Plugin (frontend.css). Wie oder von wo auch immer: Wenn irgendwer Unsinn vorgibt, muss ich es nicht noch nachmachen 😀 – dafür hab ich ja einen eigenen Kopf zum Denken. Sorry, für mich ist diese Lösung etwas unsinnig, dafür gibt es schließlich Border.

Richtig ist allerdings: Will man etwas anderes, was über die Möglichkeiten von border hinausgeht, dann ist so ein Block-Hintergrund realisiert mit :after eine Option.

Nachgtrag:
Hier noch mal auf die Schnelle:
https://jsfiddle.net/2tzbqsnh/
- Diese Antwort wurde geändert vor 2 Jahren, 5 Monaten von Angelika Reisiger.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 5 Monaten

mit Breite meine ich die Höhe/Dicke des Borders.

Alles klar.

pezi
(@pezi)

vor 2 Jahren, 5 Monaten

Ups bis ich nachsehe, ob wer was schrieb, ist es schon durch. Hoffe das Mailproblem löst sich bald wieder, sonst bin ich nicht am laufenden.

Interessant finde ich die unterschiedlichen Auffassungen, Lösungen zu

dass der Menüname „Aktuelles“ unterstrichen wird, sobald ein Einzelbeitrag angesehen wird

Ich hätte diese Aufgabe (ohne weitere Spezifikation) halt einfach so per underline gemacht – und dem Kunden erzählt, es geht nur so 😉
(Von Breite, Formatierung, Abstand, … war ja nix im „Auftrag“.)

Ja, @la-geek border-bottom wäre die nächst-einfache Sache gewesen.

@pixolin hat sich

daran orientiert, was der/die Theme-Entwickler/-in verwendet hat.

Diese andere Herangehensweise ist eben das kreative Salz in der Suppe einer eigentlich technischen Welt. Interessant.

Zum Rest der zT. komplexeren Lösungswege sage ich eh nix, das ist mir eh zu hoch.
Jedenfalls wieder ein Thread für die Lesezeichen.

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)

Das Thema „Der Menüname „Aktuelles“ soll mit CSS unterstrichen werden“ ist für neue Antworten geschlossen.

Der Menüname „Aktuelles“ soll mit CSS unterstrichen werden

Themen-Schlagwörter

Ansichten