Question

How do I make so that every link is wrapped around the <code> tag?

attribute:code doesn't work.

<html>
    <head>
        <style>a{attribute:code}</style>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
    </body>
</html>

Instead of doing <code><a href="http://www.google.com">Google</a></code>

Answer 1

CSS (Cascading Style Sheet) is used only to make things look prettier, and position them.

If you want to make changes to your DOM (Current html body), you will need Javascript.

jQuery has a function called wrap(), that wraps the desired tags within another one, like this:

$('a').each(function(){
    $(this).wrap('<code></code>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="www.google.com">Google</a><br>
<a href="www.twitter.com">Twitter</a><br>
<a href="www.facebook.com">Facebook</a><br>
<a href="www.stackoverflow.com">Stack Overflow</a><br>

This will wrap every anchor tag with the <code> tag.

If you're not a fan of jQuery, which is strange since it is awesome, there is a pure Javascript solution:

var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
   var org_html = anchors[i].innerHTML;
   new_html = "<code>" + org_html + "</code>";
   anchors[i].innerHTML = new_html;
}

<a href="www.google.com">Google</a><br>
<a href="www.twitter.com">Twitter</a><br>
<a href="www.facebook.com">Facebook</a><br>
<a href="www.stackoverflow.com">Stack Overflow</a><br>

Answer 2

如果您只想将<a>代码的外观设置为与<code>代码相同，请考虑将默认<code>样式应用于<a> }标签。

默认情况下，大多数浏览器会将此样式应用于<code>标记：

font-family: monospace;

因此，您可以将相同的内容应用于<a>代码，如下所示：

a {
    font-family: monospace;
}

Answer 3

You can use to add any content before and after using before and after psude elements

a::before { content: "<code>"; }

a::after{ content: "</code>"; }

<a href="www.stackoverflow.com">Stack Overflow</a><br>
<a href="www.google.com">Google</a><br>

用<code> tag

3 个答案: