在文本后添加内容

Question

是否可以通过伪选择器 ::after 或 ::before 将文本添加到特定单词？对于前。我想始终在单词 "Download" 旁边添加 pdf 图标。 [PDF] 下载

或者是另一种方法？

Answer 1

您的 pdf 上的 link 需要包含 pdf，那么您可以使用此选择器：

a[href*="pdf"]:before {content: '[ICON] '}
a[href*="pdf"]:after {content: ' ';}

<a href="http://example.com/test.pdf" class="pdf">learn html and css in one week</a>

Answer 2

You can use of :after or :before for insert content to Elements no text. my suggestion is wrap text in span with class and use :after or :before.

.pdf:after {
  content: ' Download';
}

<span class="pdf">[PDF]</span>

For a Elements use a[href$=".pdf"]

a[href$=".pdf"]:after {
  content: ' Download'
}

<a href="http://e-book.com/css.pdf" class="pdf">Book</a>

在文本后添加内容

Add content after text

css

pseudo-element