Question

我希望在每个链接后添加一个图像（图标）。

链接本身应该在父窗口中打开，而图像/图标也应该是相同的链接，但是在单击时它将在新窗口中打开。

例如：

HTML（在父窗口中打开）：

System.setProperty("webdriver.chrome.driver","C:\\myapp\\chromedriver.exe");
ChromeOptions options = new ChromeOptions();
options.addArguments("--test-type");
WebDriver driver = new ChromeDriver(options);
driver.get("https://www.irctc.co.in");

CSS（添加具有相同链接的图像，但在新窗口中打开）：

<a href="link.com" class="icon">Link</a>

还与.icon a:after { content: url(/img/icons/external_link.png); } }相同的href链接

这可能吗？

Answer 1

如上所述，仅限CSS不可能。但是，您可以通过使用一些 jQuery

来实现此目的

＆＃13;

$(".icon").each(function() {
  $("<a href=" + $(this).attr("href") + " target='_blank'><i class='fa fa-external-link-square'></i></a>").insertAfter($(this));
})

＆＃13;

.icon+a {
  font-size: 20px;
  display: inline-block;
  margin-left: 10px;
  text-decoration: none;
  color: coral;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<label><a href="https://stackoverflow.com/" class="icon">StackOverflow</a></label><br>
<label><a href="https://meta.stackoverflow.com/" class="icon">StackOverflow Meta</a></label>

＆＃13;

Fiddle Link

Answer 2

仅使用CSS和HTML无法实现，您可能需要单独的文本和图像标记，或者一些JavaScript / jQuery。

如果你能够使用jQuery，我建议使用.each（）函数。文档：http://api.jquery.com/jquery.each

链接后添加图片。链接在父窗口中打开，而图片在新窗口中打开

2 个答案: