Text unter dem Benutzernamen einfügen?

Entwickler
1

Gibt es eine Möglichkeit, eine Textzeile unter den Benutzernamen einzufügen? Idealerweise möchte ich, dass dies unter jedem Benutzernamen erscheint.

usernamebelow
usernamebelow453×121 23.6 KB

Das CSS, das ich verwendet habe, um dies zu erreichen, ist:

.username::after {
    content: 'website.com';
    font-size: 14px;
}

Aber offensichtlich möchte ich, dass es darunter erscheint. Danke!

2

Würde das für Sie funktionieren?

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hallo welt";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

Bearbeiten: order-Eigenschaft für Mobilgeräte hinzugefügt

3

Danke! Auf dem Desktop funktioniert es perfekt, aber aus irgendeinem Grund wird es auf Mobilgeräten über dem Benutzernamen angezeigt.

4

Oh. Interessant. Sie haben eine zusätzliche order-Eigenschaft für Mobilgeräte.

Sie können order: 4 zum after-Pseudoelement hinzufügen, und das sollte es beheben.

5

Sie könnten dies mit Gruppen-Standardtiteln erreichen.

Gruppen können Standardtitel haben, die neben dem Benutzernamen erscheinen.

Auf diese Weise können Sie für jede Gruppe einen anderen haben.

Sie könnten diese mit CSS gestalten, damit sie darunter erscheinen, wenn Sie möchten.

6

Funktioniert perfekt, danke!

7

Sie können die API auch verwenden, wenn Sie den Inhalt programmatisch anpassen müssen (um den Benutzer, den Beitrag usw. zu überprüfen).\n\nZum Beispiel:\n\njs\napi.decorateWidget(\"poster-name:after\", (dec) =\u003e {\n // \"dec.attrs\" zum Zugriff auf die Attribute des Beitrags\n return dec.h(\"div\", \"meta.discourse.org\");\n });\n\n\ncss\n.topic-meta-data .trigger-user-card {\n flex-direction: column;\n align-items: flex-start;\n}\n\n\nimage