Menu
Community /Pin to ProfileBookmark
@cootheadOct 08.2019 — #Hi there JMRKER,
your code...
....which refers to an **_a element_** which has the attribute **_class="nohref"_**
_coothead_
Selective href attribute display
Note that the line
.nohref a:after { content: ”; } /* trying to selectively cancel setting above */
does NOT produce the desired effect of hiding the ‘attr(href)’ in the style for certain links.
Would there be some alternative settings that could be used?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>
<title> Test Page </title>
<style>
a:after { content: attr(href); }
a:hover { background-color: orange; cursor: pointer; }
.nohref a:after { content: ”; } /* trying to selectively cancel setting above */
ul { list-style-type: none; cursor: pointer; }
</style>
</head>
<body>
Current appearance and effect:<br>
<ul>
<li> <a href=”./201910/Afile.html”></a> | A file </li>
<li> <a href=”./201910/HTMLtest.html”></a> | HTML Test
| <a href=”./201910/HTMLtest.css” class=’nohref’></a> CSS
| <a href=”./201910/HTMLtest.js” class=’nohref’></a> JS
</li>
<li> <a href=”./201910/Zfile.html”></a> | Z file </li>
</ul>
Desired appearance with above effects:<br>
<blockquote>
<u>./201910/Afile.html</u> | A file <br>
<u>./201910/HTMLtest.html</u> | HTML Test | CSS | JS <br>
<u>./201910/Zfile.html</u> | Z file <br>
</blockquote>
With working, but non-visible, links for CSS and JS above
<script>
</script>
</body>
</html>
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadOct 08.2019 — #Hi there JMRKER,your code...
``<i>
</i>.nohref a:after { content: ''; } <i>
</i>`</CODE>
...refers to an <STRONG>**<EM>_a element_</EM>**</STRONG> which is a descendant of an element with the attribute <STRONG>**<EM>_class="nohref"_</EM>**</STRONG>
What you actually require is...
<CODE>`<i>
</i>a.nohref:after { content: ''; } <i>
</i> ``....which refers to an **_a element_** which has the attribute **_class="nohref"_**
_coothead_