Component | Username After Information Display

Dec 12, 2024#t71

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The content discusses how to add a custom pseudo-element to a username link in a web application. It provides a CSS example to append additional content after the username using the `::after` selector. The example includes styling options such as background color, text color, padding, and border radius to enhance the appearance of the added content.

Just like the "command line" icon behind this username

Implementation Idea

Locate your username address, and just add the additional content " ::after"

Find in the browser console:

<a class="font-medium text-accent" href="https://sino.xlog.app" target="_blank" rel="nofollow noreferrer">「云华」CloudSino</a>

Then add the pseudo-element:
(This selector should not cause issues, please modify the link as needed)

<style>
.xlog-comment-list .font-medium.text-accent[href="https://sino.xlog.app"]::after {
  content: "Input Content";
};
</style>

Decorate it a bit, and it's done

.xlog-comment-list .font-medium.text-accent[href="https://sino.xlog.app"]::after {
  content: "Post Owner";
  background: turquoise;
  color: rgb(var(--tw-color-white)/var(--tw-text-opacity));;
  padding: .2em;
  border-radius: 5px;
  font-size: 80%;
  font-weight: bold;
  --tw-space-x-reverse: 0;
  margin-right: calc(.25rem * var(--tw-space-x-reverse));
  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
  word-break:keep-all;
}