diff options
| author | Eltrac <hi@guhub.cn> | 2025-05-21 21:18:38 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-05-21 21:18:38 +0800 |
| commit | 8507979b67bf70fd40186f5224b6d19ce40eedd6 (patch) | |
| tree | 25318e3eb34c89e7bd400592ea574dbae62e24ea /assets/css | |
| parent | 3381ca3d4229dfb3746e3315e5a942fd80c6a305 (diff) | |
fix: showing unwanted image in RSS feed
The original method of adding an "external" icon is to append an `<img>` tag to `<a>` tags, but if the reader is viewing the content from a reader where the CSS style does not work, the image is displayed in an unwanted way.
The workaround is to remove the `<img>` tag and implement this feature with only CSS pseudo-element.
Former-commit-id: 021a9a90fd5415262074fad37d569a4da01c7aef
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/components/_markdown.scss | 11 |
1 files changed, 11 insertions, 0 deletions
diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss index 50f7735c..ac4e28bd 100644 --- a/assets/css/components/_markdown.scss +++ b/assets/css/components/_markdown.scss @@ -28,6 +28,17 @@ $em-text-color: #889E73; a { text-decoration: underline; color: $link-color; + &.external-link::after { + content: ''; + display: inline-block; + width: 0.9em; + height: 0.9em; + background-image: url('/img/external-link.svg'); + background-size: cover; + @media (prefers-color-scheme: dark) { + filter: invert(1); + } + } } blockquote { |