在文本后添加内容

Question

是否可以通过伪选择器:: after或:: before添加文本到specyfic单词？ 对于前者我想在“下载”一词旁边添加pdf图标。 [PDF]下载

或者也许是另一种方法？

Answer 1

您在pdf上的链接需要包含pdf，然后您可以使用此选择器：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

您可以使用:after或:before来插入content元素无文字。我的建议是使用class并使用:after或:before包装文字。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

对于a元素，请使用a[href$=".pdf"]

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;